Question

我将悬停事件绑定到li标记（有关代码详细信息，请参阅下面的代码或小提琴），即当我将鼠标悬停在li上时，我添加了更改背景的类li。

li标记有一个a标记，其中包含两个带有文本的span标记，当我将鼠标悬停在两个文本span标记上时，我看不到悬停事件被执行。请看我的小提琴http://jsfiddle.net/shmdhussain/JbVMv/。提前感谢您的帮助。

<!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>

Answer 1

.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");
    });

DEMO

Answer 2

您可以使用mouseenter和mouseleave事件代替mouseover和mouseout

我编辑了你的例子：

http://jsfiddle.net/JbVMv/1/

jQuery(function($){
            var groupTab = $("ul").children("li");  
            groupTab.mouseenter(function(){
            if(!($(this).children("a").hasClass("current")))
            {
                $(this).siblings("li").children("a").removeClass("hoverBG");            
                $(this).children("a").addClass("hoverBG");
            }                   
            });         
            groupTab.mouseleave(function(){
                $(this).children("a").removeClass("hoverBG");               
            });
        });

http://api.jquery.com/category/events/mouse-events/

Answer 3

我已更新您的代码以使用mouseenter和mouseleave事件。

http://jsfiddle.net/mchail/uVsEQ/1/

此示例应按预期工作。要学习的主要内容是，当您将鼠标悬停在其中一个子元素上时，mouseout会触发一个元素。

在此处详细了解事件传播以及mouseout和mouseleave之间的区别：https://developer.mozilla.org/en-US/docs/DOM/Mozilla_event_reference/mouseout

Answer 4

如果您想要处理孩子中的悬停状态，则需要使用mouseenter和mouseleave事件。

使用这两个事件的快捷方式也是使用.focus(fn1, fn2)，其中fn1是mouseenter回调，fn2是mouseleave回调

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");
        }                   
    },function(){
        $(this).children("a").removeClass("hoverBG");               
    });         
});

演示：Fiddle

Answer 5

我们可以使用mouseover和mouseout功能，请按照下面的例子： // HTML

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

// CSS

<style type="text/css">
ul{
    list-style-type:none;
}
li{
    background-color:#DCDEDB;
    border:1px solid black;
    padding:20px;
}
.hoverBG{
    background-color:red;
}
</style>

// JQuery的

$(function(){
    $("ul").children("li").each(function() {    
        $(this).mouseover(function(){
            $(this).find('a').addClass('hoverBG');
        });
        $(this).mouseout(function(){
            $(this).find('a').removeClass('hoverBG');
        });
    });
});

jQuery Hover事件未绑定到子元素

5 个答案: