如何让可点击的什么是悬停？ [英] How to make clickable what's behind hover?

问题描述

用户将鼠标悬停在 glyphicon-globe 图像上，其后面有一个像按钮和注释表单。当用户点击按钮或注释表单没有任何反应。

查看

 < div class =image-container> 
< span class =glyphicon glyphicon-globestyle =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>喜欢
<％end％> 
< / div> 
 
< div class =text-background> 
<％= rendercomments / 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; 
} 
  

没有悬停 b

悬停

解决方案

d尝试。所以你知道，给一个元素 opacity：0; 不会使它完全消失。它仍然在位置，但不能看到。要删除一个元素，还要在中使用 opacity：0; 和 visibility：hidden &：hover 操作。

第二种方法是使用 opacity：0 ，但也设置 z-index：0 （或者底层的z-index之下的任何数字。你有悬停工作很好，但因为它有更高的 z-index



希望有助于

此外，下面的答案的旁注，这里的一个答案建议使用 display：none 在您的 display：none 显示：none 不工作，因为一旦元素设置为 display：none ，它不再存在，不是DOM的一部分，因此打破了悬停动作。

A user hovers over glyphicon-globe image and behind it lies a like button and a comment form. When a user goes to click on the button or the comment form nothing happens. How can I make clickable what lies behind the globe?

view

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

no hover

hover

解决方案

There's two ways I'd try. So you know, giving an element opacity: 0; won't make it disappear completely. It is still there in position but not able to be seen. To have an element removed also use both opacity: 0; and visibility: hidden in your &:hover action.

The second way you could do it is stick with opacity: 0 but also set z-index: 0 (or any number below the z-index of the underlying layers. You have the hover working nicely but because it has a higher z-index than the underlying layers, it is still technically sitting on top of them and covering them, making them unclickable.

Hope that helps

Also a side note to the answer below, one of the answers here suggested using display: none in your hover action. display: none doesn't work for this as once an element is set to display: none, it is no longer there, not part of the DOM and so breaks the hover action.

这篇关于如何让可点击的什么是悬停？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！