分类导航

jQuery 发布时间：2022-03-30 发布网站：大佬教程 code.js-code.com

大佬教程收集整理的这篇文章主要介绍了javascript – jQuery Hover事件未绑定到子元素，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

我将悬停事件绑定到li标签(请参阅下面的代码或小提琴,代码详细信息),即当我将鼠标悬停在li上时,我添加了更改li背景的类.

li标签有一个标签,用一个文本包含两个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>@H_301_14@

解决方法

.hover() jQuery函数有两个参数,即在悬停时执行的函数(mouseenter)和在悬停时执行的函数(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");
    });@H_301_14@ 
 DEMO