logo标签列表

jQuery悬停事件未绑定到子元素

javascriptjqueryhtml
4
我将hover事件绑定到
  • 标签上（有关代码详细信息，请参见下面的代码或fiddle），即当我悬停在
  • 上时，我添加了一个类来更改
  • 的背景。

  • 标签有一个标签，其中包含两个文本标签。当我悬停在这两个文本标签上时，我没有看到执行hover事件。请参见我的fiddle 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>
    • 5个回答
    6

    .hover() jQuery函数有两个参数，一个是当鼠标移入时执行的函数(hover)，另一个是当鼠标移出时执行的函数(hover out)。建议使用它来替代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

    4

    你可以使用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/

    2
    如果您想处理子元素的悬停状态，那么您需要使用 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
    2
    1
    我们可以使用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');
        });
    });
});
    网页内容由stack overflow 提供, 点击上面的
    可以查看英文原文，
    原文链接