鼠标移动实现样式改变
2016-07-24 20:57
501 查看
<!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>此处实现的方法是：
当数遍移动到一个元素时，遍历当前整个应用该样式的元素集，然后判断该元素如果不是当前鼠标移动在上面，则改变样式，否则不变。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 