jQuery悬停不起作用

Question

当我尝试这个时。

<ul id="sub_navigation"><li>A</li><li>B</li></ul>

jQuery像这样悬停

$(function() {
    $('#sub_navigation').hover(function() {
        $(this).addClass('hovered');
    },
    function() {
    $(this).removeClass('hovered');
    });

   alert($('#sub_navigation').is('.hovered'));

});

当我将鼠标悬停在sub_navigation时，

总是返回false。

有什么问题？

感谢

Answer 1

此处返回false是正常的，因为您在页面加载时警告 ，而不是在您悬停时 。例如，这将返回true：

$(function() {
    $('#sub_navigation').hover(function() {
        $(this).addClass('hovered');
        alert($('#sub_navigation').is('.hovered'));
    }, function() {
        $(this).removeClass('hovered');
    });
});

You can test it here

---

请记住，如果您只是为了样式而使用:hover CSS伪类，那么除了IE6之外的所有浏览器都可以使用（没有JavaScript）：

#sub_navigation:hover { color: red; }

Test it out here