[英]How to make clickable what's behind hover?
用户将鼠标悬停在glyphicon-globe
图像上方,并在其后方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;
}
没有悬停
徘徊
我尝试了两种方法。 所以您知道,给元素opacity: 0;
不会使其完全消失。 它仍然存在,但无法看到。 要删除元素,请同时使用两个opacity: 0;
和visibility: hidden
在&:hover
动作中。
第二种方法是坚持opacity: 0
但还要设置z-index: 0
(或低于基础层的z-index的任何数字。您的鼠标悬停效果很好,但是它具有较高的z-index
而不是底层,从技术上讲,它仍然位于它们之上并覆盖它们,使它们不可点击。
希望能有所帮助
还要注意以下答案,此处建议使用display: none
答案之一display: none
hover
操作中display: none
。 display: none
对此不起作用,因为一旦将元素设置为display: none
,该元素就不再存在,不再是DOM的一部分,因此中断了悬停操作。
您可以在悬停时将蓝屏显示为无。
.image-container:hover {
display: none;
}
那是你想要的吗?
这是起作用的窍门:
.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
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.