0

HTML テンプレートのナビゲーション バーを作成しようとしています。

ナビゲーション バーには、クラス「ドロップ」を持つリンクの右側に矢印があります。addClassjQueryには、「ドロップ」クラスがある場合、リンクがホバリングしていないときにそこにとどまる背景矢印を追加するために使用する1行のコードがあります。今すぐコードを参照してください:

HTML:

<nav>
    <a href="index.html" class="first">Home</a>
    <a href="about.html" class="drop">About Us</a>
    <a href="javascript:void(0);" class="drop">Other</a>
    <a href="portfolio.html">Portfolio</a>
    <a href="http://forcefire.us/">Web Hosting</a>
    <a href="contact.html">Contact Us</a>
    <a href="javascript:void(0);" class="last">&nbsp;</a>
</nav>

CSS:

nav {
    background: #333;
    border-radius: 6px;
    border-top: 1px solid #222;
    border-bottom: 1px solid #444;
}

nav a {
    padding: 15px 15px;
    display: inline-block;
    color: #888;
    font: bold 14px Sansation;
    font-weight: bold;
    text-decoration: none;
    margin: 0 -4px 0 0;
    border-left: 1px solid #444;
    border-right: 1px solid #222;
}

nav a:hover {
    background: #444;
background-image: linear-gradient(bottom, rgb(68,68,68) 0%, rgb(85,85,85) 100%);
background-image: -o-linear-gradient(bottom, rgb(68,68,68) 0%, rgb(85,85,85) 100%);
background-image: -moz-linear-gradient(bottom, rgb(68,68,68) 0%, rgb(85,85,85) 100%);
background-image: -webkit-linear-gradient(bottom, rgb(68,68,68) 0%, rgb(85,85,85) 100%);
background-image: -ms-linear-gradient(bottom, rgb(68,68,68) 0%, rgb(85,85,85) 100%);
background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, rgb(68,68,68)), color-stop(1, rgb(85,85,85)));
}
    nav .drop {
        padding-right: 20px;
    }
    nav .drop-d {
        background: url(../images/nad.png) no-repeat;
        background-position: 94% 50%;
    }
    nav .drop-u {
        background: url(../images/nau.png) no-repeat;
        background-position: 94% 50%;
    }

jQuery:

$(document).ready(function() {
// Navigation Script
    $('nav .drop').addClass('drop-d');
    $('nav .drop').hover(
        function() {
            $(this).removeClass('drop-d').addClass('drop-u');
        }, function () {
            $(this).removeClass('drop-u').addClass('drop-d');
        }
    );
});

ここで、クラス 'drop-d' のみを追加する最初の行に矢印が表示されます。しかし、それは問題ではありません。

関数はクラス「drop-d」を削除します.hover()が、ホバー時にクラス「drop-u」を追加しません。ホバーオフ (クラス「drop-u」を削除するかどうかはわかりません) が、クラス「drop-d」をもう一度追加します。

当たり前のことで申し訳ありませんが、遅くなりました。とにかく、CSSでクラスを永続的に追加してから、ホバーなどでそれを削除する以外に、何が間違っていて、それを書くより良い方法は何ですか?

4

1 に答える 1

0

あなたはそれをやり過ぎています。これは、ネイティブ CSS の:hover動作のように聞こえます。

CSS + JS の代わりにこの CSS を使用します。

nav .drop {
    padding-right: 20px;
    background: url(../images/nad.png) 94% 50% no-repeat;
}
nav .drop:hover {
    background-image: url(../images/nau.png);
}

PS - 背景の位置を別の行に設定する必要がないことに注意してください。設定の一部として記述できbackgroundます。

「nau.png」が表示されない問題について。

同じ要素に適用されるため、おそらく他の設定と衝突している次のクラスがあります。

nav a:hover {
    background: #444;
    background-image: linear-gradient ....
    ....
}
于 2013-08-30T04:48:03.640 に答える