Question

我有两个图像，第一个图像被隐藏，当我们悬停第二个图像时，第一个图像应该是可见的。代码和类名是这样的：

<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

如果允许更改标记，则可以对两个图像使用相同的父级。

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

如果您无法更改标记，则需要使用JavaScript。

Answer 2

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

试试这个。我不确定这一点。这只是我的想法。我希望它能正常工作。最好的结果

请参考这个小提琴获得许可

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

Answer 3

您必须将HTML结构更改为以下内容：

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

风格：

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

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

这必须有效

当我们悬停任何东西时影响其他元素

3 个答案:

DEMO