:hover を使用して別のクラスの CSS を操作するには?

:hover を使用した個別のクラスの CSS の操作

CSS で複数のクラスを操作する場合、スタイルを変更する必要がある場合があります。 1 つのクラスは別の要素のホバー状態に基づいています。 .item:hover .wrapper のようなネストされたセレクターを使用するのは直感的に思えるかもしれませんが、これは直接可能ではありません。

ただし、この効果を実現するには 2 つの実行可能なアプローチがあります:

• 兄弟関係と子の関係: ターゲット要素 (ラッパー) が、ホバーされた要素 (項目) の子要素または直接の兄弟要素である場合、~ (兄弟) または (直接の兄弟) セレクターを利用できます。例:

.item:hover + .wrapper {
  background-color: red;
}

• 子孫関係: ターゲット要素がホバーされた要素の子孫である場合、> を使用できます。 .item:hover ルール内の (子孫) セレクター。例:

.item:hover > .child > .wrapper {
  color: black;
}

これらのアプローチは、対象となる要素が HTML 構造内の兄弟または子孫である場合に効果的であることを覚えておいてください。 DOM 内で直接関連していない要素については、JavaScript などの代替ソリューションを検討する必要がある場合があります。

以上が:hover を使用して別のクラスの CSS を操作するには?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。