ios0213的专栏

Web前端自学者的学习历程

鼠标移动实现样式改变
<!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>

此处实现的方法是:

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

阅读更多
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/ios0213/article/details/52016171
个人分类: JavaScript
想对作者说点什么? 我来说一句

WPF Button 鼠标移动改变样式

kllxyu kllxyu

2015-08-06 12:31:45

阅读数:1916

没有更多推荐了,返回首页

不良信息举报

鼠标移动实现样式改变

最多只允许输入30个字

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭