4

基本的に私は3つのリンクを持っており、ユーザーがリンク領域に出入りするときに、ホバーcssプロパティを使用してそれらを白/赤にしました。

<div id="nav-glob">
    <ul>
        <!--menu-->
        <li class="nav-home"><a href="#content">Home</a></li>
        <li class="nav-portfolio"><a href="#lavori">Portfolio</a></li>
        <li class="nav-contact"><a href="#footer">Contact</a></li>
    </ul>
</div>

.nav-glob a:hover {
    color: red;
}

次に、jQueryでclick()、関数を使用してcsscolorプロパティを赤に設定しました。

$('.nav-home > a').click(function(){
    $(".nav-home a").css("color", "red");
    $(".nav-contact a").css("color", "white");
    $(".nav-portfolio a").css("color", "white");
});

$('.nav-portfolio > a').click(function(){
    $(".nav-home a").css("color", "white");
    $(".nav-contact a").css("color", "white");
    $(".nav-portfolio a").css("color", "red");
});

$('.nav-contact > a').click(function(){
    $(".nav-home a").css("color", "white");
    $(".nav-contact a").css("color", "red");
    $(".nav-portfolio a").css("color", "white");
});

問題は、これが最初は正常に機能していることです。1つのリンクをクリックすると、hoverCSSプロパティが無視されます。hoverクリックすると無効になっているようです。どんな助けでも大歓迎です、ありがとう

4

3 に答える 3

3

a異なるタグの状態についてCSSを試してください。

a.clicked {
    color: #f00;
}
a.hovered{
   color: #f00 !important;
}
a.faded {
    color: #fff
}


$('#nav-glob ul li a').hover(function() {
    $(this).parent().siblings('li').find('a').removeClass('hovered');
    $(this).addClass('hovered');
}, function() {
    $(this).parent().siblings('li').find('a').removeClass('hovered');
    $(this).removeClass('hovered');
}).click(function(e) {
    e.preventDefault();
    $('#nav-glob ul li a').removeClass('faded');
    $(this).parent().siblings('li').find('a').addClass('faded');
    $(this).addClass('clicked');
});

デモ

または@Blazemongerが言ったように

a.faded {
    color: #fff
}
a.clicked {
    color: #f00;
}
a:hover{
   color: #f00 !important;
}

$('#nav-glob ul li a').click(function(e) {
    e.preventDefault();
    $('#nav-glob ul li a').removeClass('faded');
    $(this).parent().siblings('li').find('a').addClass('faded');
    $(this).addClass('clicked');
});

デモ

于 2012-05-23T17:59:42.720 に答える
2

:hoverプロパティをに設定してみてください!important。インラインスタイルを上書きする必要があります。

または、を使用したくない場合は、インラインCSSスタイルを直接変更するのではなく、を使用して特定のクラスを追加および削除!importantできます。.toggleClass()

于 2012-05-23T18:00:37.817 に答える
0

インラインスタイルはスタイルシートスタイルを上書きします。これは予想される動作です。色をデフォルトに戻す代わりに、スタイル属性を削除して、スタイルシートが制御できるようにします。

$('#nav-glob a').click(function(){
    var $this = $(this);
    $this.parent().siblings().children('a').removeAttr("style");
    $this.css("color", "red");
});
于 2012-05-23T18:03:17.783 に答える