0

私はこのコードを持っています、このフィドルを観察してください：http: //jsfiddle.net/VjhJ4/19/

単語にカーソルを合わせると、テキストの色が白に変わります。これが私が望む方法です。ただし、20pxの境界線の下部にカーソルを合わせると、テキストの色は白に変わりません。マウスを境界線の下部に置いて確認するだけです。

下部にカーソルを合わせたときにテキストの色が白に変わるようにするにはどうすればよいですか？現在、ホバー設定をオンにしていますul#secondary-menu a:hover { color: #FFFFFF;}

4

3 に答える 3

2

以下を追加する (または既存の CSS を修正して含める) だけです。

#second-menu ul.nav li:hover a {
    color: #fff;
}​

JS フィドルのデモ。

以前にホバーを変更しなかった理由と、これがどのように役立ったかを説明できますか? 前述したように、私のコーディング知識は限られているため、ここで何が問題だったのかを学ぼうとしています

おそらく（そして、私はあなたのCSSを読むのを途中であきらめたのではないかと思います）、要素の子である要素の:hoverルールを指定したため、以前はホバー効果を変更していませんでしたが、ボーダーはではなく に取り付けられます。そのため、の境界線にカーソルを合わせても効果はありませんでした。aliliali

このルールは、要素の上にマウスを置いたときに、a内の要素の色liが白 ( ) になるように指定するだけです。実際には、このルールをスタイルシートの最後に配置すると、他の場所で宣言されている可能性のある他の競合するルールがオーバーライドされます (また、スタイルシートが長いため、スタイルシートを読むことを断念しました)。#fffli

効果を定義するルールを見つけてa:hover、2 つのルールを一緒に追加することをお勧めします。次に例を示します。

#second-menu ul.nav li a:hover,
#second-menu ul.nav li:hover a {
    color: #fff;
}

特異性はそれほど高くする必要はないかもしれないので、セレクターを次のように短くすることができるかもしれません:

ul.nav li a:hover,
ul.nav li:hover a {
    color: #fff;
}

style="..."ああ、インライン ( ) と外部スタイル (スタイルシートを使用)がかなり混在していることに注意してください。明確にするため、また更新、編集、および保守を容易にするために、外部フォームのみを使用してみてください。

于 2012-08-11T14:41:16.587 に答える
1

境界線をハイパーリンクの一部にしたい (つまり、マウスが境界線の上にあるときにユーザーがハイパーリンクをクリックできるようにする) 場合は、境界線を から削除し、li代わりにハイパーリンクに追加する必要があります。 . display:inline-block必要に応じて、ハイパーリンクに追加します。

境界線がハイパーリンクの一部である必要がない場合は、@David Thomas の提案で十分です。

修正されたデモ

于 2012-08-11T14:44:34.613 に答える
1

文字列 ul#secondary-menu a:hover { color: #FFFFFF;} を検索します。

あなたのCSSスタイルでそれを置き換えます

ul#secondary-menu li:hover a{ color: #FFFFFF;}

于 2012-08-11T14:52:46.233 に答える