javascript - 悬停在未选中的其他元素上的类 - 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(). _

$(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/