鼠标移动实现样式改变

最新推荐文章于 2021-06-19 23:32:58 发布

ios0213

最新推荐文章于 2021-06-19 23:32:58 发布

阅读量1.2k

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/ios0213/article/details/52016171

版权

JavaScript 专栏收录该内容

44 篇文章 1 订阅

订阅专栏

<!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>

此处实现的方法是：

当数遍移动到一个元素时，遍历当前整个应用该样式的元素集，然后判断该元素如果不是当前鼠标移动在上面，则改变样式，否则不变。

ios0213

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
鼠标移动实现样式改变

无标题文档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;}
复制链接

扫一扫