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="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。