将类悬停在未选中的其他元素上-javascript

Hover class on other elements not on selected - javascript

本文关键字：其他 元素 -javascript 悬停      更新时间：2023-09-26

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，当悬停在HOME链接上时，不要将"onHover"类添加到该链接，只添加其他三个链接。

您可以使用not((选择器不允许拾取项目。

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

但是，如果你真的想要的话，你可以用纯CSS的解决方案来做到这一点。不需要JavaScript。

使用jQuery :not()选择器不包括"selected"类。最好使用事件委派.on()，而不是直接将事件绑定到元素，例如.hover()。

请参阅http://api.jquery.com/not-selector/有关使用CCD_ 4的更多信息。

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

相关文章：