<html> <head> <title>文字的无缝滚动</title> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <style type="text/css"> *{ margin: 0; padding: 0; } body{ font-size: 12px; line-height: 24px; } a{ text-decoration: none; color:#333; } a:hover{ color:#ff0000; } ul { list-style: outside none none; } #mooc{ width: 399px; margin: 50 auto 0; border: 5px solid #BBBBBB; box-shadow: 2px 2px 10px #ababab; border-radius: 15px; } #mooc_head{ height: 60px; /* Safari 5.1 - 6.0 */ background: -webkit-linear-gradient(top, #f05e6f, #c9394a); background: -moz-linear-gradient(center top,#f05e6f, #c9394a); background: linear-gradient(to bottom, #f05e6f, #c9394a); /* Safari /* Firefox 3.6 - 15 /* 标准的语法 */ position: relative; padding-left: 30px; line-height: 60px; font-size: 24px; color:#FFFFFF; border-radius: 8px 8px 0px 0px; } #mooc_head a{ right:10px; bottom: 10px; line-height: 30px; color:white; position: absolute; font-size: 12px; } #moocbox{ height:150px; overflow: hidden; margin-left: 25px; width:335px; } #moocbox ul li{ height: 24px; } #moocbox ul li a{ display:block; color:black; float:left; height: 24px; text-indent: 15px; overflow: hidden; width: 180px; } #mooc span{ color:#999; float: right; } </style> </head> <body> <div id="mooc"> <h3 id="mooc_head">慕课网最新课程 <a href="#">更多>></a> </h3> <div id="moocbox"> <ul id="con1"> <li><a href="#">1.学会html5 绝对的屌丝逆袭（案例）</a><span>2013-09-18</span></li> <li><a href="#">2.tab页面切换效果（案例）</a><span>2013-10-09</span></li> <li><a href="#">3.圆角水晶按钮制作（案例）</a><span>2013-10-21</span></li> <li><a href="#">4.HTML+CSS基础课程(系列)</a><span>2013-11-01</span></li> <li><a href="#">5.分页页码制作（案例）</a><span>2013-11-06</span></li> <li><a href="#">6.导航条菜单的制作（案例）</a><span>2013-11-08</span></li> <li><a href="#">7.信息列表制作(案例)</a><span>2013-11-15</span></li> <li><a href="#">8.下拉菜单制作(案例)</a><span>2013-11-22</span></li> <li><a href="#">9.如何实现“新手引导”效果</a><span>2013-12-06</span></li> </ul> <ul id="con2"> <li><a href="#">1.学会html5 绝对的屌丝逆袭（案例）</a><span>2013-09-18</span></li> <li><a href="#">2.tab页面切换效果（案例）</a><span>2013-10-09</span></li> <li><a href="#">3.圆角水晶按钮制作（案例）</a><span>2013-10-21</span></li> <li><a href="#">4.HTML+CSS基础课程(系列)</a><span>2013-11-01</span></li> <li><a href="#">5.分页页码制作（案例）</a><span>2013-11-06</span></li> <li><a href="#">6.导航条菜单的制作（案例）</a><span>2013-11-08</span></li> <li><a href="#">7.信息列表制作(案例)</a><span>2013-11-15</span></li> <li><a href="#">8.下拉菜单制作(案例)</a><span>2013-11-22</span></li> <li><a href="#">9.如何实现“新手引导”效果</a><span>2013-12-06</span></li> </ul> </div> </div> <script type="text/javascript"> var l1 = document.getElementById("moocbox"); var con1=document.getElementById("con1"); function scrollUp () { if(l1.scrollTop>=con1.offsetHeight){ l1.scrollTop=0; }else{ l1.scrollTop++; } } var time=50; var myScroll=setInterval(scrollUp,time); l1.onmouseover=function(){ clearInterval(myScroll); } l1.onmouseout=function(){ myScroll=setInterval(scrollUp,time); } </script> </body></html>
问为什么我的a：hover没有执行？？跟那块冲突了？？？
