CSS は、別の要素の上にマウスを置くと要素のプロパティを変更できますか?

別の要素のホバーに対する別の要素への影響

別の要素にホバーしたときに要素のプロパティを変更することは可能ですか?このクエリでは、CSS のみを使用してこの動作を実現する方法を詳しく調べます。

CSS の固有の機能により、非子孫または隣接する兄弟をターゲットにすることはできませんが、それが可能な特定のシナリオがあります。

子孫

影響を受ける要素がホバーされた要素の子孫である場合、CSS セレクター

#parent_element:hover #child_element, /* or */
#parent_element:hover > #child_element {
    opacity: 0.3;
}

を使用して効果的にターゲットに設定できます。たとえば、これはホバー時の「parent_element」内の「child_element」をターゲットにします:

<div>

隣接する兄弟

隣接する兄弟をターゲットにするには、少し異なる方法が必要ですアプローチ:

#first_sibling:hover + #second_sibling {
    opacity: 0.3;
}

これは、「first_sibling」にカーソルを置いたときに「next_sibling」に影響します:

<div>

あなたの場合の実装

検討中あなたのサンプルは、おそらく似たようなものを目指しているでしょうto:

img:hover + img {
    opacity: 0.3;
    color: red;
}

これは、最初の画像にカーソルを置いたときに 2 番目の画像に影響します。

デモ

[この JS Fiddle デモ] にアクセスしてください。インタラクティブな例については (ここにデモリンクを挿入)。

以上がCSS は、別の要素の上にマウスを置くと要素のプロパティを変更できますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。