css - 最初の子がアクティブ化された状態でリストをロールオーバーしますか?

Question

私の下手な英語でごめんなさい、私はフランス人です！

最初liはすでに赤ですが、古典的なロールオーバー効果が必要です（cssのみ）

<ul>
    <li>1111</li>
    <li>2222</li>
    <li>3333</li>
</ul>

と

li:first-child { color: red; }
li:hover { color: red; }
ul:hover li:first-child { color: black; }
li:first-child:hover { color: red; }

最後の行が機能しません: マウスが 1111 を超えると、赤くならずに黒くなります。

ここを見てください：http://jsfiddle.net/cP5rQ/3/

そして、前もってありがとう。

score 0 · Accepted Answer

最後のルールの特異性を十分に高めて、少なくとも3番目のルールの特異性と等しくなるようにする必要があります。次に、3番目のルールをオーバーライドし、アイテムが必要に応じて赤になります。

最後のルールを次のように記述してこれを行います

ul:hover li:first-child:hover { color: red; }

score 0 · Accepted Answer

これでうまくいきます。これはあなたが望んでいたことですか？

li:first-child { color: red; }
ul:hover li:first-child { color: black; }
li:hover { color: red; }
ul:hover li:first-child:hover { color: red; }

2 に答える 2