悬停任何内容时都会影响其他元素

Question

I have two images, first image is hidden and when we hover second image the first image should be visible. The codes and class names are like this :

<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

If you are allowed to change the markup, you can use the same parent for both images.

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;
}

DEMO

If you cannot change the markup, you need to use JavaScript.

Answer 2

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

Try this. I m not sure about this. This is my idea only. I hope it will be work fine. All the best for getting result

please refer this fiddle for getting clearance

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

Answer 3

You have to change HTML structure to the following:

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

And styles:

.entrycontent img.wp-image-48
{
  display: none;
}

.entrycontent a:hover img.wp-image-48
{
  display: block;
}

This must work