CSS ホバー効果はターゲット以外の要素に影響を与えることができますか?

CSS ホバー効果は別の要素にも拡張できますか?

CSS では、隣接する要素、または別の要素内にネストされている要素にホバー効果を直接適用することはできません。これは、効果が適用されている要素に限定され、他の要素に影響を与えるために使用することはできないことを意味します。

子孫および隣接する兄弟効果

ただし、このルールには 2 つの例外があります。隣接兄弟セレクター( )または子孫セレクターを使用する場合(>):

• 隣接する兄弟: 2 つの要素が隣接する兄弟である (HTML コード内で互いに直後に現れる) 場合、1 つの要素に基づいて効果を適用できます。隣接する兄弟セレクターを使用して、もう一方のホバー状態をオンにします。例:

#first-sibling:hover + #second-sibling {
  opacity: 0.3;
}

• Descendants: 同様に、ある要素が別の要素の子孫である (内部にネストされている) 場合、子孫に基づいて効果を適用できます。子孫セレクターを使用して親のホバー状態を確認します。例:

#parent-element:hover #child-element {
  opacity: 0.3;
}

問題の解決

特定の例では、ユーザーが画像の上にカーソルを置いたときに #thisElement という要素の不透明度を変更したいとします。 「img」のクラス。ただし、「img」の CSS ホバー効果を使用して #thisElement を直接ターゲットにすることはできません。代わりに、次のことを検討できます:

1. 隣接兄弟の使用: #thisElement が HTML 内で画像の次に隣接する兄弟である場合、次を使用できます:

.img:hover + #thisElement {
  opacity: 0.3;
}

2. を使用する子孫: #thisElement が画像のコンテナー内でネストされている場合、次を使用できます:

.img-container:hover #thisElement {
  opacity: 0.3;
}

以上がCSS ホバー効果はターゲット以外の要素に影響を与えることができますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。