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

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

视图

 
  
 
  @challenge.id), class: "btn", method: :post do %>  Like  
 
  
 
  

CSS

 .image-container { position: relative; height: auto; #image-foreground { position: absolute; z-index: 2; opacity: 1; &:hover { opacity: 0; } } } .text-wrapper { opacity: 1; } 

没有hover

徘徊

Answer 1

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

你可以做到的第二种方法是坚持使用opacity: 0但是也设置z-index: 0 （或者低于底层图层的z-index的任何数字。你的hover工作很好但是因为它具有更高的z-index比起底层，它仍然在技术上坐在它们上面并覆盖它们，使它们不可点击。

希望有所帮助

下面是答案的旁注，其中一个答案建议在hover操作中使用display: none 。 display: none对此不起作用，因为一旦元素设置为display: none ，它就不再存在，不是DOM的一部分，因此打破了hover操作。

Answer 2

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

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