CSS を使用して、ホバー時に要素のスタイルを間接的に変更するにはどうすればよいですか?

ホバー時の間接的な要素変更の実装

Web 開発では、ユーザーの操作に基づいてさまざまな要素を操作することが不可欠です。一般的なシナリオは、別の要素にカーソルを置いたときに、ある要素の変更をトリガーすることです。

JSFiddle デモで提供されている例を考えてみましょう。 #cube 要素にカーソルを置くと、その背景色が青に変わります。ただし、代わりに #container 要素にカーソルを置いたときにこの効果を実現したいとします。この間接的な変更はどのように実行できますか?

CSS :hover 擬似クラスを使用すると、特定の要素にカーソルを置いたときに別の要素に変更が発生するように指定できます。利用可能なオプションを調べてみましょう:

コンテナ内に直接キューブ:

#cube 要素が #container 要素内に直接ネストされている場合、次の CSS セレクターを使用できます。 :

#container:hover > #cube { background-color: yellow; }

このセレクターは、 #cube 要素がその直接の子である場合にのみ #cube 要素をターゲットにします。 #container 要素と #container 要素の上にマウスを移動します。

Cube Adjacent to Container:

#cube 要素が #container 要素の直後に配置されている場合 (次それに)、このセレクターを使用できます:

#container:hover + #cube { background-color: yellow; }

このセレクターは #cube をターゲットにしています#container 要素にカーソルを置いたときの #container 要素の直後の要素。

コンテナ内のネストされた要素の内部のキューブ:

#cube 要素が内部にネストされている場合#container 要素内の別の要素では、このセレクターを使用できます:

#container:hover #cube { background-color: yellow; }

This #container 要素にカーソルを置くと、セレクターは #container 要素の子孫であるすべての #cube 要素をターゲットにします。

Cube Sibling to Container:

If the #cube要素は #container 要素と同じ階層レベルにあるため、これを使用できますselector:

#container:hover ~ #cube { background-color: yellow; }

このセレクターは、#container 要素にカーソルを置いたときに、#container 要素の兄弟である (つまり、同じ親要素を共有する) #cube 要素をターゲットにします。

これらの CSS セレクターを活用すると、特定の要素にカーソルを置いたときに他の要素のプロパティを簡単に変更でき、インタラクティブで視覚的に魅力的な Web を確立できます。経験。

以上がCSS を使用して、ホバー時に要素のスタイルを間接的に変更するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。