Question

我有HTML代码：

<ul class="items">
    <li class="">...</li>
    <li class="">...</li>
    <li class="">...</li>
</ul>

我希望每个li都有一个悬停效果，所以我在jquery中有代码：

$('.items >li').live('hover', function( event ) {
    if( event.type === 'mouseenter' )  
        $(this).addClass('hover');  
    else
        $(this).removeClass('hover');  
});

奇怪的是，如果我删除选择器中的＆gt; li，这不会像我预期的那样工作：

 $('.items').live('hover', function( event ) {
       //the same as above in here
 }

这适用于整个ul。我也试过像这样的委托：

$('.items').delegate('li','hover', function( event ) {
    if( event.type === 'mouseenter' )  
        $(this).addClass('hover');  
    else
        $(this).removeClass('hover');  
});

这也不起作用，有人发现这里有什么问题吗？谢谢你的帮助。

Answer 1

将您的代码包装在

中

$(document).ready(function(){   

});

或捷径

$(function(){   

});

jsfiddle自动包装document.ready处理程序

中的代码

检查是否包含jquery

if (typeof jQuery == 'undefined') {  
    // jQuery is not loaded  
} else {
    // jQuery is loaded
}

修改

尝试使用

$('.items li').live(

编辑2
在{1.4}中添加了对live的{{1}}支持，如果您使用的是旧版本，则可以尝试使用

hover

http://jsfiddle.net/m2SwD/1/

Answer 2

它对我有用。

http://jsfiddle.net/m2SwD/

我在FF5上测试过。

以下是代码：

$(document).ready(function(){
  $('.items > li').live('hover', function( event ) {
    if( event.type === 'mouseenter' )  
        $(this).addClass('hover');  
    else
        $(this).removeClass('hover');  
  });
});

Answer 3

可能在＆gt;之后应该有空格，您还可以使用find功能缩小搜索范围。

Answer 4

您是否定义了应用时可见的CSS悬停类？（如在jsFiddle提供的那样）。

Answer 5

li元素在被悬停之前已经在它上面应用了一个颜色css，这会加入另一个css悬停：#color到它。后者不会生效，因为li元素有两个颜色的css。当我删除前一个时它起作用了。

jquery hover live（委托）不起作用

5 个答案: