鼠标移动实现样式改变

原创 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>

此处实现的方法是:

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

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

onmouseover事件中把鼠标变成小手形状

在网上查了些资料,很多说是把相应的标签的style.cursor='hand',即style.cursor属性设置为"hand",经测试,这种写法经常出现问题,改成 style.cursor="po...
  • qq_15167261
  • qq_15167261
  • 2015年07月09日 10:55
  • 1185

WPF Button 鼠标移动改变样式

  • kllxyu
  • kllxyu
  • 2015年08月06日 12:31
  • 1772

Swing —— JTable鼠标移入更换单元格颜色

效果图: 相关代码 public class MouseHoverTable extends JFrame { Color color = new Color(232, 232, 232)...
  • u012045597
  • u012045597
  • 2013年12月04日 22:23
  • 1419

用jQuery实现鼠标在table上移动进行样式变化

1、定义样式    .striped        {            background-color:red;        }  .over  {   backgroun...
  • sgp4205
  • sgp4205
  • 2013年06月20日 15:25
  • 908

鼠标移动到上面,鼠标的样式改为手型

鼠标移动到上面,鼠标的样式改为手型  style="cursor: pointer"
  • WEILIN19921214
  • WEILIN19921214
  • 2015年07月30日 11:53
  • 279

鼠标移动到图片上时,图片的样式改变

.applyBorder { border:0.2cm groove orange }.removeBorder { border:none }onmouseout="this.className=r...
  • nhpyliner
  • nhpyliner
  • 2007年08月16日 11:27
  • 1377

Unity 鼠标移动监听

Move.cs 鼠标移动事件的脚本代码。 void OnMouseDrag() { Debug.Log("MouseInArea"); transform.position += Vec...
  • qqMCY
  • qqMCY
  • 2013年07月13日 16:08
  • 4464

jquery,当把鼠标 移到某<div/>上时,把鼠标形状 换成自己的一个小图片。

鼠标样式这个东西挺绕的。我总结下我的经验。 首先不需要用jquery定义鼠标,css里面就有。 语法 cursor:url(你自己的路径),auto; url里面是你自己的路径,auto实...
  • kungfu_panda
  • kungfu_panda
  • 2014年08月07日 00:32
  • 3856

Tkinter 8.5 参考手册: a GUI for Python (五)8(鼠标)指针

5.8. (鼠标)指针 有一堆不同样式的鼠标指针可供使用。它们的名称和图形已经展示。具体的图形效果将取决于你的操作系统。表4 cursor选项的值 ...
  • leak235
  • leak235
  • 2016年01月02日 19:28
  • 683

JS原生代码实现鼠标移动图片随之移动效果(另加点击改变图片效果)

以下是源代码 图片跟着鼠标走 *{ margin:0px; padding:0px;} #Img{ position:absolute; top:0px; left:0px; wid...
  • YCixZoem
  • YCixZoem
  • 2017年04月13日 15:03
  • 381
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:鼠标移动实现样式改变
举报原因:
原因补充:

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