:hover は外部 CSS クラスを変更できますか?

:hover は外部 CSS クラスを変更できますか?

CSS では、:hover セレクターを使用して、ホバー上の要素にスタイルの変更を適用できます。しかし、別の要素がホバーされているときに、別のクラスの要素の CSS を変更したい場合はどうすればよいでしょうか?

CSS セレクターは、DOM 内の階層または関係に基づいて要素のみをターゲットにするため、直接変更することはできません。現在のホバー要素のスコープ外の要素の CSS を変更します。

間接的な変更のオプション

ただし、同様の効果を達成する間接的なアプローチもあります。

• 親子関係: 変更したい要素 (E) がホバーされた要素 (F) の子である場合、F で :hover セレクターを使用して E をターゲットにすることができます。 .

.item:hover .wrapper {
  /* Styles to be applied to '.wrapper' when '.item' is hovered */
}

• 兄弟関係: E が F の兄弟 (または F の兄弟のいずれかの子孫) の場合、 ~ 兄弟コンビネータを使用できます。

.item:hover ~ .wrapper {
  /* Styles to be applied to '.wrapper' when '.item' or any of its siblings is hovered */
}

JavaScript ソリューション

CSS ソリューションが実現できない場合は、JavaScript を使用して、 F のホバー状態。

<code class="javascript">document.querySelector('.item').addEventListener('mouseenter', () => {
  document.querySelector('.wrapper').style.backgroundColor = 'red';
});

document.querySelector('.item').addEventListener('mouseleave', () => {
  document.querySelector('.wrapper').style.backgroundColor = '';
});</code>

結論

CSS セレクターだけでは外部クラスを直接変更できませんが、親子関係または兄弟関係と JavaScript は間接的な解決策を提供します。同様の効果が得られます。

以上が:hover は外部 CSS クラスを変更できますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。