用戶將鼠標懸停在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'在'圖像foreground' ID你是不是能夠點擊元素 –
如果要變成可點擊只有一個元素您可以捕獲前端對象的單擊,使該對象消失,然後在需要的元素中生成單擊。 –
謝謝@pitabasprathal。問題在於我把z-index設置爲負值,但是隨後地球圖像閃爍,導致我癲癇發作 –