CSS を使用して、ある要素のホバー効果を別の要素にカスケードできますか?

ある要素の効果は別の要素に影響を与えることができますか?

指定されたコードは、画像の不透明度を高めると同時に別の要素の不透明度を下げることを目的としています画像の上にカーソルを置いたとき。このような効果は単純に見えるかもしれませんが、CSS だけでは実行できません。

目的の効果を確立するには、影響を受ける 2 つの要素がコード内の子孫または隣接する兄弟である必要があります。

子孫への影響

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

これは構造化された要素に影響します次のように:

<div>

隣接する兄弟への影響

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

これは HTML 構造で機能します:

<div>

両方のインスタンスで、セレクターの 2 番目の要素が影響を受けます。

クエリに記載されている特定のニーズについては、次のような式が機能する可能性があります:

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

[JS Fiddle Demo](https://jsfiddle.net/)

以上がCSS を使用して、ある要素のホバー効果を別の要素にカスケードできますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。