カーソルを合わせたときに無関係な要素の CSS を変更できますか?

マウスオーバーで別のクラスの CSS を変更できますか?

多くの開発者は、ある要素の CSS を別の要素のときに変更する必要に遭遇します。無関係な要素がマウスオーバーされます。 CSS 単独ではこれを達成するには制限が生じることが多く、潜在的な解決策の検討が求められます。

CSS ソリューション

ありがたいことに、CSS はこのタスクに対して 2 つの効果的なアプローチを提供します。

1. E の子としての F: CSS を変更したい要素 (F) がホバーされた要素 (E) の子要素である場合、次を使用します:

   .item:hover .wrapper {
       /* CSS modifications for element F */
   }

2. F as a Sibling of E: F が E の子ではなく、DOM 内の後の兄弟またはその子孫である場合 (図では E の後に表示されます)マークアップ)、以下を使用します:

   .item:hover ~ .wrapper {
       /* CSS modifications for element F */
   }

JavaScript の代替手段

このような単純なタスクには JavaScript は一般的に推奨されませんが、代替アプローチ:

document.getElementsByClassName('item')[0].onmouseover = () => {
    document.getElementsByClassName('wrapper')[0].style.backgroundColor = "url('some url')";
};

以上がカーソルを合わせたときに無関係な要素の CSS を変更できますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。