Question

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

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

单击图像防止按钮

1 个答案: