css - 图像上方防止按钮被点击

Question

下午好在 html 站点中，我有一个矩形图像，当我将鼠标悬停在它上面时，会弹出第二个图像。第二个图像比原始图像大，并且位于按钮顶部。问题是，我无法点击按钮，它总是触发悬停图像。如何解决此问题以便我可以单击按钮？这是一个 fiddle

HTML:

    <li id="menu-item-2365" class="positionabsolute menu-item menu-item-type-custom menu-item-object-custom current-menu-item menu-item-2365 has-image"><a href="como-ajudar/donativos/"
 class="menu-image-title-hide menu-image-hovered"><span class="menu-image-hover-wrapper">
    <img width="126" height="38" src="http://piq.codeus.net/static/media/userpics/piq_307293_400x400.png" class="menu-image menu-image-title-hide" style="position:absolute" alt=""><img width="126" height="145" src="http://piq.codeus.net/static/media/userpics/piq_307293_400x400.png" style="position:absolute" class="hovered-image menu-image-title-hide" alt="" ></span></a></li>
    <br/>
    <br/>
    <br/>
    <input type="button" value="click" style="margin-left:50px" />

https://jsfiddle.net/u15qbh6w/

Answer 1

您可以将 display: none 设置为第二张图片，如果它悬停，则 display: initial

所以您的示例的 css 看起来像这样:

.menu-item a.menu-image-hovered img.hovered-image,
.menu-item a.menu-image-hovered:hover img.menu-image {
  opacity: 0;
  transition: opacity 0.25s ease-in-out 0s;
}
.menu-item a.menu-image-hovered img.hovered-image {
  display: none;
}
.menu-item a.menu-image-hovered:hover img.hovered-image {
  display: initial;
  opacity: 1;
}