javascript - 何かをホバーすると他の要素に影響を与える

Question

2 つの画像があります。最初の画像は非表示で、2 番目の画像にカーソルを合わせると、最初の画像が表示されます。コードとクラス名は次のようになります。

<div class="entrycontent">
<p>
<a>
<img class="alignnone size-full wp-image-48" src="path" />
</a>
<a>
<img class="alignnone size-full wp-image-42" src="path" />
</a>
</p>
</div>

Answer 1

  .wp-image-42:hover +.wp-image-48 { display: block; }

これを試して。これについてはよくわかりません。これはあくまでも私の考えです。うまくいくことを願っています。結果を出すために最善を尽くす

クリアランスを取得するには、このフィドルを参照してください

http://jsfiddle.net/daFDn/4/

Answer 2

マークアップの変更が許可されている場合は、両方の画像に同じ親を使用できます。

html:

<div class="entrycontent">
<p>
<a>
  <img class="alignnone size-full wp-image-48" src="path" />
  <img class="show-on-hover alignnone size-full wp-image-42" src="path" />
</a>
</p>
</div>

CSS:

a .show-on-hover {
  display: none;
}

a:hover .show-on-hover {
  display: block;
}

デモ

マークアップを変更できない場合は、JavaScript を使用する必要があります。