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

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

这必须工作

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。

Answer 3

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

尝试这个。我不确定。这只是我的想法。我希望它会正常工作。一切顺利

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

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