为啥在鼠标经过事件上运用background-position没有效果，但在鼠标停了是有效果的。
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了为啥在鼠标经过事件上运用background-position没有效果，但在鼠标停了是有效果的。相关的知识，希望对你有一定的参考价值。
<html lang="en">
<head>
<meta charset="UTF-8">
<title>星级评分</title>
<script type="text/javascript" src="Jqjx/jq.js"></script>
<style>
ullist-style: none;width: 200px;margin-top: 0px
.ul1 libackground: url("自动播放/img/星号.png");background-position: 0 -46px;width: 20px;height: 20px;float: left
.hoverbackground-position: 0 -27px;cursor: pointer
</style>
</head>
<body>
<div style="text-align: center">
<div style="display: inline-block">
<p style="float: left;margin-top: 0px;font-size: 14px;margin-right: 10px">点击星星能打分</p>
<ul class="ul1">
<li style="background-position: 0 -27px"></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<div></div>
</div>
</div>
<script>
var len=$(".ul1 li").length;
for ( var i=0;i<len;i++)
$(".ul1 li").eq(i).mouseover(function()
$(".ul1 li").eq($(this).index()).prevAll().addClass("hover");
$(".ul1 li").eq($(this).index()).addClass("hover");
)
</script>
</body>
</html>
$(".ul1 li").mouseenter(function()
$(".ul1 li.hover").removeClass("hover");
$(this).prevAll("li").andSelf().addClass("hover");
)
</script>
在下拉选项鼠标经过事件中接触了闭包
在制作鼠标经过下拉导航的过程中遇到通过for循环来遍历ul的子元素li并分别为其添加鼠标经过事件使其改变背景颜色，如下代码：
for(var i=0,l=lis.length;i<l;i++){ lis[i].onmouseover=function(){ lis[i].style.background=‘#567‘; }
}
但是结果是当鼠标经过li的时候并不能使li改变颜色，这是为什么呢？仔细想想这也没有错误呀！首先遍历ul下的所有第一代子元素li然后添加dom0级事件onmouseover事件，通过一个匿名函数来改变行元素li的背景。但是如果我们稍加修改把以上代码变成如下方式情况就完全不一样了：
1 for(var i=0,l=lis.length;i<l;i++){ 2 lis[i].onmouseover=(function(i){ 3 return function(){lis[i].style.background=‘#567‘;} 4 }(i)); 5 }
这时候当鼠标经过li的时候就能得到我们想要的效果了。这是为什么呢？原来这是闭包在起作用。
js变量不同于c语言等其他语言是块级作用域变量只在大括号里面才有定义，而js函数的作用域是函数作用域，它的作用域在整个函数中都有定义。在for循环中的i与在for循环中外定义i没有什么区别。所以在匿名函数使用i的时候它的值已经被初始化为lis.length了，而i在实际上最大只能取到lis.length-1所以lis.length这个值i是取不到的，所以我们也就看不到任何效果了。当我们把li的事件绑定到一个函数表达式上，并且在函数表达式内部，我们将一个匿名函数作为参数返回出去的话，情况就不一样了。这里的i就是闭包环境下的i可以依次取到每次for循环到的i了。
以上是关于为啥在鼠标经过事件上运用background-position没有效果，但在鼠标停了是有效果的。的主要内容，如果未能解决你的问题，请参考以下文章
只能通过 unsafeWindow 从 TamperMonkey 脚本触发鼠标悬停事件 - 为啥？
为啥css做的二级导航，当鼠标停留在一级上时候，二级菜单正常显示。当鼠标移动到二级菜单，
JS事件 鼠标经过事件（onmouseover）鼠标经过事件，当鼠标移到一个对象上时，该对象就触发onmouseover事件，并执行onmouseover事件调用的程序。