悬停在其他元素上的类没有选中 - javascript

Question

HTML

<div>
    <ul class="navBar"> 
        <li class="selected"><a href="#">HOME</a></li>
        <li><a href="#">WORKS</a></li>
        <li><a href="#">ARTICLES</a></li>
        <li><a href="#">ABOUT</a></li>
    </ul>
</div>

CSS

.selected{
    background-color: #CCCCCC;
}

.onHover{
    display: block;
    background-color: #0088FF;
}

JAVASCRIPT

$(function() {
        $("ul.navBar li a").hover(
            function(){
                $(this).addClass("onHover");
            },
            function(){
                $(this).removeClass("onHover");
        });
    });

我想要的是javascript在悬停时不添加'onHover'类到HOME链接，只是其他三个链接。

Answer 1

您可以使用not()选择器禁止挑选该项目。

$(function() {
    $("ul.navBar li:not(.selected) a").hover(
        function(){
            $(this).addClass("onHover");
        },
        function(){
            $(this).removeClass("onHover");
    });
});

但如果你真的想要，你可以使用纯CSS解决方案。不需要JavaScript。

Answer 2

使用jQuery :not()选择器不包含“selected”类。最好使用事件委托.on()而不是直接将事件绑定到元素即。 .hover()。

有关使用:not()。

的详情，请参阅http://api.jquery.com/not-selector/

$(function () {
    $(document).on('mouseenter', 'ul.navBar li:not(.selected) a', function () {
        $(this).addClass('onHover');
    });
    $(document).on('mouseleave', 'ul.navBar li:not(.selected) a', function () {
        $(this).removeClass('onHover');
    });
});

请参阅小提琴：http://jsfiddle.net/4rZ3D/