CSSを使用してホバー時に兄弟要素の色を変更するにはどうすればよいですか?

CSS ホバーを使用して兄弟の色を選択的に変更する方法

要素上にホバーするときに、特定の CSS テクニックを使用して、隣接する要素の外観を変更します。

後続のターゲット兄弟

CSS セレクターで「 」記号を使用すると、カーソルを置いている要素の直後の要素をターゲットにすることができます。たとえば、次のコードは、前の「h1」要素がホバーされたときに「a」要素の色を変更します。

h1:hover + a { color: #4f4fd0; }

前の兄弟をターゲット

ただし, 以前の兄弟をターゲットにする場合、CSS には制限があります。同様の効果を実現するには、親コンテナ内で要素をラップし、一般的な兄弟セレクター「~」を使用して目的の要素をターゲットにする必要があります。ただし、この方法では常に望ましい結果が得られるとは限りません。

#banner h1:hover ~ a { color: #4f4fd0; }

シナリオ例

次の HTML マークアップを考えてみましょう:

<h1>

ID「title」を持つ「h1」をホバーしたときに「a」要素の色を変更するには、次のようにします。次の CSS:

#title:hover + .button { color: #4f4fd0; }

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