如何使悬停背后的内容可点击？答案

【问题标题】：How to make clickable what's behind hover?如何使悬停背后的内容可点击？
【发布时间】：2016-05-13 18:32:22
【问题描述】：

用户将鼠标悬停在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;
}

无悬停

悬停

【问题讨论】：

由于z-index in image-foreground id 你无法点击该元素
如果只有一个元素可以点击，您可以捕获对前面对象的点击，使该对象消失，然后在您需要的元素中生成点击。
谢谢@pitabasprathal。问题是我在悬停时将 z-index 设置为负数，但随后地球图像闪烁进出导致我癫痫发作
请在回答中解释@EddeAlmeida。我将不胜感激。

标签： html css ruby-on-rails ruby hover

【解决方案1】：

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

第二种方法是坚持使用opacity: 0，但也设置z-index: 0（或低于底层z-index的任何数字。悬停效果很好，但因为它有更高的@987654327 @而不是底层，从技术上讲，它仍然位于它们之上并覆盖它们，使它们无法点击。

希望有帮助

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

【讨论】：

您好，以上都做了。仍然不会点击：/感谢您的详细解释:)

【解决方案2】：

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

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

这就是你想要的吗？

【讨论】：

您可以在悬停显示上添加第二个：block;
对后者不行。与以前相同的行为，但是当我将鼠标悬停在display: none; 上时，我应该详细说明它不断闪烁进出。我可以点击，但地球的行为很古怪，如果悬停在原地，它不会消失
如果您悬停一个名为 hover 的变量设置为 True，您可以这样做。然后哪个会改变背景？
你能用代码更新答案吗？没有得到你要发布的东西。
类似 if（悬停在图像上）{ hide = true}; if (hide){document.getElementById("image").style.display = "none";} 对不起，如果没有工作。

【解决方案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
  }
}

【讨论】：