0

クリックしたときに変更するcss属性をリンクするナビゲーションメニューがあります。また、リンク以外のものをクリックすると、css プロパティが必要に応じて変更されます。

しかし、jquery を開始する前に css puedo:hoverは正常に機能しました.cmNavItem a:hoverが、jquery 関数のいずれかが実行された後に機能しませんか?

これが私のコードです：

<nav id="cmNavContainer"><!-- Start of side menu -->

    <ul id="cmNav">
        <li class="cmNavItem"><a href="#" id="navItem1">link 1</a></li>
        <li class="cmNavItem"><a href="#" id="navItem2">link 2</a></li>
        <li class="cmNavItem"><a href="#" id="navItem3">link 3</a></li>
        <li class="cmNavItem"><a href="#" id="navItem4">link 4</a></li>
        <li class="cmNavItem"><a href="#" id="navItem5">link 5</a></li>
    </ul>

</nav><!-- closes cmNav -->

CSS:

.cmNavItem a:link, .cmNavItem a:visited{
        border-bottom:1px solid #323233;
        border-top:1px solid #323233;
        line-height:30px;
        width:182px;
        display:block;
        margin-left:0;
        padding-left:10px;

        font-size:15px;
        font-family:arial,sans-serif;
        color:#fff;
        font-weight:bold;
    }
        .cmNavItem a:hover{
            border-bottom:1px solid #000;
            border-top:1px solid #2a2a2b;
        }

jquery:

$(document).ready(function(){

    $(".cmNavItem a").on('click', function(){
        $(this).css({
        'border-bottom-color':'000',
        'border-top-color': '2a2a2b',

        });
        $(this).css('opacity','1').closest('.cmNavItem').siblings('.cmNavItem').find('a').css({
        'opacity': '0.3',
        'border-bottom-color': '323233',
        'border-top-color': '323233'
        });


    });

    $("#cmNavContainer").animate({left: 0}, 1000);


    $(document).on('click', function(e) {
        if ( ! $(e.target).closest('.cmNavItem').length ) {
            // you clicked anywhere but on an element inside #linkitem (or itself)
            $('.cmNavItem a').css({
            'opacity': '2',
            'border-bottom-color': '323233',
            'border-top-color': '323233'

            });
        }
    });

});

:hoverjquery の実行後にcss を再び機能させるにはどうすればよいですか?

ありがとう

4

1 に答える 1

0

IMO ホバー効果は引き続き機能します。ちなみに、#000、#2a2a2a、#323232 の色は、1px ラインではほとんど同じに見えるかもしれません。ホバー境界線の色を見やすいもの (#0f0 と #f00 としましょう) に変更すると、ホバリングが表示されます。

http://jsfiddle .net/2qfQH/

FF 20、Opera 12、Chrome 26、IE 10 でテスト済み

于 2013-05-13T20:48:50.173 に答える