鼠标移动实现样式改变

原创 2016年07月24日 20:57:21
<!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>

此处实现的方法是:

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

版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

jsp页面鼠标移动样式和颜色变化

鼠标移入截取的字符串将显示全部字符串及改变它的字符串的样式

由于协议标题,最多可以输入50字;当协议标题比较长时,页面就会产生滚动条;这样使得布局很不协调,用户体验很差。于是我擅自主张,做了这个功能,效果图如下: 实现操作的步骤: 1)...

#711 – 在拖拽的过程中改变鼠标样式(Changing the Mouse Cursor While Dragging)

原文地址:https://wpf.2000things.com/2012/12/13/711-changing-the-mouse-cursor-while-dragging/ 在WPF拖拽的过程中,...

unity鼠标光标样式改变

通过搜集网上鼠标光标形状改变,整理如下 1.将下面javascript代码,将它挂在任意对象上即可,然后将手形状的图片拖动面板中,这种方法比较简单,写的代码也比较少 var mouse : Tex...

【Unity3D】改变鼠标样式

Unity3D改变鼠标样式很简单,直接就封装好方法,以满足在游戏里面定制自己的鼠标样式的需求。下面举一个例子来说明这个问题。我需要将光标改成如下的形状: 注意这张图片是经过处理的png,白色...

jquery怎么实现页面刷新后保留鼠标点击addclass的样式

原文: 感谢所以回答问题的人。 比较好的办法是使用url传参数,然后根据参数判断是否有必要显示class 但是更好的办法是下面这段JS $('ul.main-menu li a')....

jquery实现页面刷新后保留鼠标点击addclass的样式

亲测 最好用的方法: [javascript] view plain copy   "font-size:18px;">$('ul.main...
  • sz_09
  • sz_09
  • 2017年05月10日 14:05
  • 98

纯css样式实现盒子 3D 旋转、鼠标悬停效果

看到一个css3的动画效果,感觉很高大上的样子,心血来潮自己研究了一下。先来个效果图: 下面来看这个3d效果究竟是怎么实现的。 (目前IE暂不支持 transform-style: prese...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:鼠标移动实现样式改变
举报原因:
原因补充:

(最多只允许输入30个字)