我将悬停事件绑定(bind)到 li 标签(请参阅下面的代码或 fiddle ，了解代码详细信息)，即当我将鼠标悬停在 li 上时，我添加了改变 li 背景的类。
li 标签有一个 a 标签，当我将鼠标悬停在两个文本 span 上时，它包含两个带有文本的 标签，我没有看到悬停事件被执行。请看我的 fiddle http://jsfiddle.net/shmdhussain/JbVMv/ .在此先感谢您的帮助。span 标签
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Untitled Page</title>
<link rel="stylesheet" type="text/css" href="css/reset.css"></link>
<link rel="stylesheet" type="text/css" href="css/mystyle.css"></link>
<script src="/jquery-my.js" ></script>
<script>
jQuery(function($){
var groupTab = $("ul").children("li");
groupTab.hover(function(){
if(!($(this).children("a").hasClass("current")))
{
$(this).siblings("li").children("a").removeClass("hoverBG");
$(this).children("a").addClass("hoverBG");
}
});
groupTab.mouseout(function(){
$(this).children("a").removeClass("hoverBG");
});
});
</script>
<style>
li{background-color:#DCDEDB;
border:1px solid black;
padding:20px;
}
.hoverBG{
background-color:red;
}
</style>
</head>
<body>
<div class="">
<ul class="" id="">
<li class=" ">
<a class="current" href="#" >
<span class="">
MyName
</span>
<br>
<span class="">MyData</span>
</a>
</li>
<li class="" >
<a class="" href="#" >
<span class="">
MyName
</span>
<br>
<span class="">MyData</span>
</a>
</li>
<li class="" >
<a class="" href="#">
<span class="">
MyName
</span>
<br>
<span class="">MyData</span>
</a>
</li>
</ul>
</div>
</body>
</html>
最佳答案
.hover() jQuery 函数有两个参数，一个是在 hover (mouseenter) 时执行的函数，另一个是在 hover out (mouseleave) 时执行的函数。你应该使用它而不是 mouseleave
groupTab.hover(function () {
if (!($(this).children("a").hasClass("current"))) {
$(this).siblings("li").children("a").removeClass("hoverBG");
$(this).children("a").addClass("hoverBG");
}
}, function () {
$(this).children("a").removeClass("hoverBG");
});
关于javascript - jQuery Hover 事件未绑定(bind)到子元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/16099031/