html - 如何使悬停后面的内容可点击？

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; 不会让它完全消失。它仍然在原位，但无法被看到。要删除元素，请在 &:hover 操作中同时使用 opacity: 0; 和 visibility: hidden。

第二种方法是坚持使用 opacity: 0 但同时设置 z-index: 0(或低于底层 z-index 的任何数字层。您的悬停效果很好，但由于它的 z-index 高于底层，从技术上讲，它仍然位于它们之上并覆盖它们，使它们无法点击。

希望对你有帮助

下面的答案还有一个旁注，这里的一个答案建议在您的 hover 操作中使用 display: none 。 display: none 对此不起作用，因为一旦元素设置为 display: none，它就不再存在，不再是 DOM 的一部分，因此会中断悬停行动。