別の要素の上にマウスを置いたときに、CSS だけで 1 つの要素をスタイル設定できますか?

CSS を使用して 1 つの要素にカーソルを合わせると別の要素に影響を与える

質問:

1 つの要素にカーソルを合わせると CSS 効果が得られます近くにある別の要素の外観を直接変更するのは難しい場合があります。このような効果を実装する試みはありますが、純粋に CSS を通じて可能かどうかは不明のままです。

答え:

要素の上にマウスを置いたときに要素の外観に影響を与える機能。 CSS を使用する別の要素は厳しく制限されています。実際、これは、ターゲット要素がトリガー要素の子孫または隣接する兄弟である場合にのみ実行できます。

子孫要素:

影響を受ける要素の場合トリガー要素内にネストされている場合、CSS を使用してホバー時に操作できます:

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

このセレクターが適用されます次の構造を持つ要素への影響:

<div>
<p><strong>隣接する兄弟:</strong></p>
<p>トリガー要素に隣接する兄弟である要素の場合は、別のアプローチが必要です。 </p>
<pre class="brush:php;toolbar:false">#first_sibling:hover + #second_sibling {
  opacity: 0.3;
}

このセレクターは、次の HTML 内の要素をターゲットにします。構造:

<div>
<p><strong>制限事項:</strong></p>
<p>どちらの場合も、セレクターで指定された後者の要素がホバー時に影響を受けることに注意することが重要です。 .</p>
<p><strong>例:</strong></p>
<p>の場合提供された疑似コードの例と同様のシナリオでは、次の CSS ルールを使用できます:</p>
<pre class="brush:php;toolbar:false">img:hover + img {
  opacity: 0.3;
  color: red;
}

この効果を示す例は、提供された JS Fiddle: https://jsfiddle.net/