html - 子ilにカーソルを合わせると、親ulが変わるはずです

Question

Wordpress テンプレートのドロップダウンメニューを作成しています。メインのメニュー項目を、ホバーしたときにサブ項目と同じ色にしたいと考えています。ここでスタックオーバーフローに関する多くの同様の質問を見つけ、それらの解決策を試しましたが、私の場合はうまくいかないようです。

解決策は次のとおりである必要があると思います。

parent:hover child { ... }

たとえば、ここで機能します。

コードで同じことをしようとしましたが(最後の CSS セレクターを参照してください)、ここでは機能しません。

score 1 · Accepted Answer

以下から CSS を更新します。

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

に

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

jsFiddle の更新された例。

score 0 · Accepted Answer

フィドルの最後の CSS 宣言を次のように置き換えることで、希望する効果を得ることができます。

.menu ul li:hover > a {
    background-color: #006699;
    color: #fff !important;
}

2 に答える 2