1

作成中の Web サイトのナビゲーション バーを作成しようとしていますが、強調表示されたときに各ボタンを異なる色で表示したいと考えています。<ul>ナビゲーションバーの作成に使用しました。問題は、「a:hover {background:#;}」を特定の要素のインライン CSS として使用する方法があるかどうかです。

each<li>または<a>id を指定してから、内部スタイル シートでそれらへの参照を作成しようとしましたが、機能しません。以下は私がこれまでに持っているものです。

#menu {height:37px;display:block;margin:20px auto;border:1px solid;border-radius:5px;margin-left:30px;max-width:550px}
#menu ul {margin:0;padding:0;}
#menu li {float:left;display:block;min-width:110px} 
#menu a {display:block;padding:12px;font:bold 13px/100% Arial, Helvetica, sans-serif;text-align:center;text-decoration:none;text-shadow:2px 2px 0 rgba(0,0,0, 0.8); background-color:#5A8A41;border-right:1px solid #1b313d; color:#fff;}  
#menu a:hover {background:#5D80B0;}
...
<div id='menu'>
<ul>
   <li class='active'><a href='#'><span>Home</span></a></li>
   <li><a href='#'>XML</a></li>
   <li><a href='#'>SQL</a></li>
   <li><a href='#'>Java</a></li>
   <li><a href='#'>C#</a></li>
</ul>
</div>

ご存知のように、私は 1 週間ずっと html と CSS を使用しています。ですから、これがばかげた質問である場合は申し訳ありません。ありがとう。

4

4 に答える 4

5

それは完全に不可能です。ごめん。

代わりに、色ごとに CSS クラスを作成し、適切なクラスを各リンクに適用できます。

#menu a.red:hover { background: red; }
于 2013-05-27T16:55:38.103 に答える
3

:nth-child(X)疑似クラスを使用する場合、追加するすべての new にクラスを追加しなくてもこれを行うことができliます。このために、 を に移動し、background-color他liのいくつかの CSS プロパティも追加する必要がありましたが、大したことはありません。

これは、色を追加するための CSS になります。

#menu li:nth-child(1):hover { background: red; }
#menu li:nth-child(2):hover { background: blue; }
#menu li:nth-child(3):hover { background: purple; }
#menu li:nth-child(4):hover { background: yellow; }
#menu li:nth-child(5):hover { background: pink; }

デモ

+ :n番目の子

于 2013-05-27T17:19:32.417 に答える
2

jqueryでこれを達成できます:)

$(document).ready(function() {
    $('a').hover(function(){
        $(this).parent().css({background-color: 'yellow'});
    });
});
于 2013-05-27T17:04:34.333 に答える