3

我将悬停事件绑定到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>
4

5 回答 5

6

.hover()jQuery 函数有两个参数，要在(mouseenter) 处执行的hover函数和要在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");
    });

演示

于 2013-04-19T07:13:07.473 回答
3

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

于 2013-04-19T07:10:47.413 回答
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");               
    });         
});

演示：小提琴

于 2013-04-19T07:12:59.287 回答
2

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

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

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

mouseout在此处阅读有关事件传播以及与mouseleave此处的区别的更多信息： https ://developer.mozilla.org/en-US/docs/DOM/Mozilla_event_reference/mouseout

于 2013-04-19T07:17:16.453 回答
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');
        });
    });
});
于 2013-04-19T12:38:46.490 回答