0

おそらく非常に基本的な質問であることをお詫びしますが、このオンラインの解決策は見つかりませんでした。

シンプルな CSS メニューがあります。CSS は次のとおりです。

#nav {
    width: 100%;
    float: left;
    margin: 0 0 3em 0;
    padding: 0;
    list-style: none;
    opacity:1;
    border-bottom: 1px solid #ccc; 
    border-top: 1px solid #ccc;
}

#nav li {
    float: left; 
}

#nav li a {
    display: block;
    padding: 8px 15px;
    text-decoration: none;
    font-weight: bold;
    color: #069;
    border-right: 1px solid #ccc;
}

#nav li a:hover {
    color: #c00;
    background-color: #fff;
}

/* End navigation bar styling. */

これはオンライン チュートリアルからのものなので、私のコードではありません。

HTMLは次のとおりです。

<!-- language: lang-html -->

<ul id="nav">
    <li><a href="#">About Us</a></li>
    <li><a href="#">Our Products</a></li>
    <li><a href="#">FAQs</a></li>
    <li><a href="#">Contact</a></li>
    <li><a href="#">Login</a></li>
</ul>

私がやりたいのは、ホバーしたときに各メニュー項目に異なる色を付けることだけです。
アイテムごとに個別の ID (またはクラス) を作成する必要があると思いますが、構文がよくわからず、何を試してもうまくいきません。

ご協力いただきありがとうございます。

4

4 に答える 4

2

クラスを href リンクに追加し、css でホバー状態を呼び出し、それに応じてスタイルを設定します。コードを使用した例を次に示します: http://jsfiddle.net/LGL37/

HTML:

<a href="#" class="about">TEXT</a>

CSS

.about:hover { background: yellow; }

編集:これはクロスブラウザー互換性があるため、他の回答よりもはるかに優れたソリューションであり、将来さらにスタイルを設定する必要がある場合は、混乱を招く可能性がある nth ではなく、個々のクラスをターゲットにする必要があります。

于 2013-08-09T17:32:28.743 に答える
2

セレクターを使用しない場合は、それぞれに:nth-child()一意のクラスを追加できますlinav

<li class="about"><a href="#"></a></li>

その特定のクラスのスタイルシートでホバー効果を設定します

#nav li.about a:hover { background-color: red; }
于 2013-08-09T17:32:42.230 に答える
2

:nth-childセレクターを使用できますが、一部の古いバージョンの IEでは機能しません。

Jsフィドル

#nav li:nth-child(1) a:hover {
 color:green;
}

#nav li:nth-child(2) a:hover {
color:blue; 
}

等

于 2013-08-09T17:29:54.967 に答える
1

n番目の子を使用できます：

li:nth-child(2) a:hover{
  color: red;
}

http://jsfiddle.net/fAbFg/

この例は、2 番目の項目に影響します。

于 2013-08-09T17:29:32.103 に答える