1 つの要素をホバーしたときに他の要素に影響を与える方法

Question

<p>私がやりたいのは、1 つの <code>div</code> にカーソルを置くと、別の <code>div</code> のプロパティに影響を与えることです。 </p> <p>たとえば、この JSFiddle デモでは、<code>#cube</code> にカーソルを置くと、<code>背景色</code> が変更されますが、私が望んでいるのは、マウスを移動したときです。 <code>#container</code>、<code>#cube</code> が影響を受けます。 <!-- p--> </p>

<pre class="ブラシ:css;ツールバー:false;">div { アウトライン: 1 ピクセルの赤一色。 } ＃容器 { 幅: 200ピクセル; 高さ: 30ピクセル; } #キューブ { 幅: 30ピクセル; 高さ: 100%; 背景色: 赤; } #cube:ホバー { 幅: 30ピクセル; 高さ: 100%; 背景色: 青; }</pre> <pre class="brush:html;toolbar:false;"><div id="container"> <div id="キューブ"> </div> </div></pre> <p><br /></p>

Answer 1

この具体的な例では、次のものが使用できます:

リーリー

この例は、cube が container の子の場合にのみ機能します。より複雑なシナリオの場合は、別の CSS を使用するか、JavaScript を使用する必要があります。

Answer 2

キューブがコンテナの中に直接ある場合:

リーリー

キューブがコンテナの隣 (コンテナの終了タグの後) にある場合:

リーリー

キューブがコンテナ内のどこかにある場合:

リーリー

キューブがコンテナの兄弟である場合:

リーリー