css - 1つの要素にカーソルを合わせると、他のすべての要素のスタイルを変更します

Question

同じDOMレベルにたくさんのdivがあるとしましょう。1つにカーソルを合わせると、他のすべてのスタイルを変更して（つまり、不透明度を下げたり、背景を変更したり）、カーソルを合わせたものは同じままにします。

+またはセレクターを使用できません~。これは、直接隣接する兄弟だけでなく、次の兄弟だけを選択するために必要なためです。基本的に私が探しているのは「これ以外のすべての兄弟」セレクターです。これは存在しますか？JavaScriptなしでこれを達成する方法はありますか？

score 16 · Accepted Answer

秘訣は、ホバー疑似セレクターを親要素に配置し、それに応じて子のスタイルを設定することです。これが私が言及しているものです：

.parent:hover .child {
    opacity: .5;
}
.parent .child:hover {
    opacity: 1;
}

これがデモです：http：//jsfiddle.net/joshnh/FJAYk/

score 2 · Accepted Answer

上記の例は非常に優れていますが、divの間にマージンがあり、空のスペースにカーソルを合わせたときにエフェクトをトリガーしたくない場合は、javascriptは必要ありません。

簡単な回避策は次のとおりです。

に追加float:leftして.child、それが含まれていることを確認し.parentてoverflow:visibleください（デフォルトで表示されているはずです）。

これを行うと、.parent高さが0pxになります（したがって、空のスペースは効果をトリガーしません）が、カーソルを合わせると両方の疑似クラスがトリガーされ.childます:hover。

2 に答える 2