鼠标移动实现样式改变
2016-07-24 20:57
627 查看
<!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <style type="text/css"> ul{ margin-top:50px; list-style-type:none; } li{ width:100px; line-height:40px; height:40px; background-color:#099; float:left; text-align:center; border-right:1px solid #FFF; } </style> </head> <body> <ul> <li id="1" onMouseOver="checkstyle(this,id)">147</li> <li id="2" onMouseOver="checkstyle(this,id)">258</li> <li id="3" onMouseOver="checkstyle(this,id)">369</li> <li id="4" onMouseOver="checkstyle(this,id)">752</li> </ul> <script> var li=document.getElementsByTagName("ul")[0].getElementsByTagName("li"); var i; function checkstyle(obj,m) { obj.style.backgroundColor="red"; for(i=0;i<li.length;i++) { if(i+1!=m) { li[i].style.backgroundColor="#099"; } } } </script> </body> </html>
此处实现的方法是:
当数遍移动到一个元素时,遍历当前整个应用该样式的元素集,然后判断该元素如果不是当前鼠标移动在上面,则改变样式,否则不变。