如何使可点击的悬停背后的东西？

Question

用户将鼠标悬停在glyphicon-globe图像上，其背后有一个类似按钮和评论表单。当用户点击按钮或评论表单时没有任何反应。我怎样才能点击全球背后的可点击内容？

查看

<div class="image-container">
  <span class="glyphicon glyphicon-globe" style="font-size: 7em; color: white; text-align: center; width: 100%; background-color: #446CB3; border-radius: 4px; padding: 19%;" id="image-foreground"></span>
  <div class="text-wrapper">
    <div class="like-button">
      <%= link_to like_challenge_path(:id => @challenge.id), class: "btn", method: :post do %>
        <span class='glyphicon glyphicon-thumbs-up'></span> Like
      <% end %>
    </div>

    <div class="text-background">
      <%= render "comments/form" %>
    </div>
  </div>
</div>

CSS

.image-container {
  position: relative;
  height: auto;

  #image-foreground {
    position: absolute;
    z-index: 2;
    opacity: 1;
    &:hover {
      opacity: 0;
    }
  }
}

.text-wrapper {
  opacity: 1;
}

没有悬停

悬停

Answer 1

我尝试过两种方式。所以你知道，给一个元素opacity: 0;不会让它完全消失。它仍然在位，但不能被看到。要删除元素，请在opacity: 0;操作中同时使用visibility: hidden和&:hover。

你能做到的第二种方法是坚持使用opacity: 0，但也设置z-index: 0（或者在底层的z-index之下的任何数字。你的悬停工作很好但是因为它有比底层更高z-index，它在技术上仍然位于它们之上并覆盖它们，使它们无法点击。

希望有所帮助

以下答案的旁注，其中一个答案建议在display: none操作中使用hover。 display: none无法为此工作，因为一旦元素设置为display: none，它就不再存在，不会成为DOM的一部分，因此会中断悬停操作。

Answer 2

你可以在悬停时将蓝屏显示为无。

.image-container:hover {
   display: none;
}

它是你想要的吗？

Answer 3

这是有效的伎俩：

.hide-globe {
  position: absolute;
  width: 100%;
  background-color: #ccac00;
  padding: 100px;
}

.text-wrapper {
  position: absolute; // This was essential
  opacity: 0;
  z-index: 1;
  width: 100%;
  &:hover { 
    opacity: 1;
    background-color: white; // And this helped make the image seemingly go away
  }
}