0

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

ジャバスクリプト

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

ここで必要なのは、ホバーしたときに「onHover」クラスを HOME リンクに追加せず、他の 3 つのリンクだけを追加する JavaScript です。

4

2 に答える 2

1

not（）セレクターを使用して、アイテムの選択を許可しないようにすることができます。

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

しかし、本当に必要な場合は、純粋なCSSのみのソリューションでこれを行うことができます。JavaScriptは必要ありません。

于 2013-03-20T04:41:57.103 に答える
0

jQuery:not()セレクターを使用して、「選択された」クラスを含めないようにします。.on()また、イベントを要素に直接バインドするよりも、イベント委任を使用することをお勧めします。.hover().

の使用の詳細については、 http://api.jquery.com/not-selector/を参照してください: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/

于 2013-03-20T04:44:44.563 に答える