CSS は、別のクラスの上にマウスを置くと、あるクラスのスタイルを変更できますか?

マウスオーバー時に CSS を使用してクラス スタイルを変更する

マウスをマウスオーバーしたときに 1 つのクラスの CSS プロパティを変更するために、単一の CSS ルールを使用できますか別のクラスの要素ですか?次のようなルールを作成することは可能ですか:

.item:hover .wrapper { /*some css*/ }

.wrapper が .item 内に直接含まれるのではなく、ドキュメント内の別の場所に配置されます。

CSS ソリューション

はい、これは CSS セレクターを使用して可能です。 :hover を使用して別の要素のスタイルを変更する場合、次の 2 つのアプローチが可能です:

1。子孫または子要素

.wrapper が .item の子要素である場合、このセレクターを使用できます:

.item:hover .wrapper {
    /* CSS properties to change */
}

2。兄弟要素

.wrapper が .item の兄弟要素であり、DOM の .item の後に表示される場合、次のセレクターを使用できます:

.item:hover ~ .wrapper {
    /* CSS properties to change */
}

JavaScript ソリューション

この単純なタスクには JavaScript は必要ありませんが、JavaScript を使用すると目的の効果を得ることができます。以下に例を示します。

document.getElementsByClassName('item')[0].addEventListener('mouseover', function() {
  document.getElementsByClassName('wrapper')[0].style.background = "url('some url')";
});

追加情報

サンプルのメニュー要素が個別のクラスを使用しているように見えることに注意することが重要です。要素の上にマウスを移動すると、そのサブメニューがオーバーレイとして右側に表示されます。サブメニューの背景を制御するクラスの名前は「wrapper」です。望ましい効果を実現するには、上記で説明した兄弟セレクターのアプローチを使用します。

参考文献

• [CSS 2.1 セレクター](https://www.w3.org) /TR/CSS21/selectors.html)

以上がCSS は、別のクラスの上にマウスを置くと、あるクラスのスタイルを変更できますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。