如何讓鼠標點擊後懸停？

用戶將鼠標懸停在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; 
}

沒有懸停

懸停

來源

2016-05-13 AnthonyGalli.com

由於'Z-index'在'圖像foreground' ID你是不是能夠點擊元素 –

如果要變成可點擊只有一個元素您可以捕獲前端對象的單擊，使該對象消失，然後在需要的元素中生成單擊。 –

謝謝@pitabasprathal。問題在於我把z-index設置爲負值，但是隨後地球圖像閃爍，導致我癲癇發作 –

你可以懸停顯示上做藍色屏幕無法比擬的。

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

這就是你想要的嗎？

來源

2016-05-13 18:46:19 killereks

沒有工作，但感謝您嘗試 –

您可以添加到第二個懸停顯示：塊; – killereks

不適用於後者。與以前相同的行爲，但我應該詳細說明'display：none;'當我將鼠標懸停在它上面時，它會一直閃爍。我可以點擊，但是地球正在發揮作用，如果在現場徘徊，將不會保持不動 –

有兩種方法可以嘗試。所以你知道，給出一個元素opacity: 0;不會使它完全消失。它仍然存在，但無法被看到。要刪除某個元素，請在&:hover操作中同時使用opacity: 0;和visibility: hidden。

你可以做的是堅持opacity: 0還設置z-index: 0（或任意數量的底層的z-index的下面，你必須懸停很好地工作，但第二種方式，因爲它具有更高的z-index比底層，它在技術上仍坐在他們的頂部和覆蓋他們，使他們無法點擊。

希望幫助

另外一個側面說明下面的答案，答案在貴hover行動使用display: none這裏建議。display: none不適用於此，因爲一旦元素設置爲display: none，它不再存在，不是DOM的一部分，因此打破懸停動作。

來源

2016-05-14 01:00:37 RuNpiXelruN

嘿，上述所有。仍然不會點擊：/感謝您的詳細解釋:) –

這裏是工作的伎倆：

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

來源

2016-05-14 17:56:19

如何讓鼠標點擊後懸停？

回答

相關問題