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");
        });
    });

我在这里想要的是当鼠标悬停在 HOME 链接上时不将“onHover”类添加到其他三个链接的 javascript。

Answer 1

您可以使用 not()选择器不允许选择元素。

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

但是，如果您确实需要，您可以使用纯 CSS 解决方案来做到这一点。不需要 JavaScript。