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

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

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

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

子孫への影響

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

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

<div>
<p><strong>隣接する兄弟への影響</strong></p>
<pre class="brush:php;toolbar:false">#first_sibling:hover + #second_sibling {
    opacity: 0.3;
}

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

<div>
<p>両方のインスタンスで、セレクターの 2 番目の要素が影響を受けます。</p>
<p>クエリに記載されている特定のニーズについては、次のような式が機能する可能性があります:</p>
<pre class="brush:php;toolbar:false">img:hover + img {
    opacity: 0.3;
    color: red;
}

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