1

親要素にカーソルを合わせて、すべての子要素の CSS を変更したいと考えています。これは簡単だろうと思いました。言うのは簡単です：

.element:hover .children{
}

その要素にカーソルを合わせると、どの要素に影響を与えたいかを特定できます。ここにいるすべての子供たちに影響を与えたいと思っていますが、何が間違っているのかわかりません。簡単な例を次に示します。

http://jsfiddle.net/ZqTcT/11/

そして、これは私が使用している特定の nth-child CSS です。

.rowYellow:hover .rowYellow:nth-child(n){
    color:yellow;
}

また、機能することがわかっているもの（最初の例、ホバー時に変更する要素を指定する）を使用し、複数の要素を使用してみましたhttp://jsfiddle.net/ZqTcT/12/：

.rowYellow:hover .rowIcon .rowLabel{
    color:yellow;
}

私は、そのようなステートメントを 2 つ (またはそれ以上) に分ける習慣がついたことを知っていました。それもうまくいかないからです。

それで、どこが間違っているのですか？どちらのアプローチも機能しますか? もしそうなら...どうやって？

ありとあらゆる助けをいただければ幸いです。

4

1 に答える 1

2 
.rowYellow:hover .rowYellow:nth-child(n){

上記は、 class を持つ要素rowYellow内のclass を持つ要素にのみ影響しrowYellowます。

代わりに、すべての子に影響を与えるには、*セレクターで次のようにします。

.rowYellow:hover *{
    color:yellow;
}

jsFiddle A

2番目のセレクターは、「クラスのホバーされた要素内rowLabelのクラスの要素内のクラスのすべての要素」と言いますが、これはあなたが望むものではありません。代わりに、コンマ区切りのセレクターが必要です。rowIconrowYellow

.rowYellow:hover .rowIcon, .rowYellow:hover .rowLabel{
    color:yellow;
}

jsFiddle B

余談ですが、覚えておく必要がある 30 個の CSS セレクターもお勧めします。これは、すべてのセレクターを完全に理解するまで非常に役立つからです。

于 2013-02-07T01:58:07.247 に答える