在圖像上設置div的可見性點擊

Question

所以我有一個標籤內的圖像，我也有一個在屏幕中間居中的div。

如何讓這個div隱藏，直到圖像被點擊？

頁的預覽時，DIV可見：

使添加到購物車在屏幕中間一個div。我希望只在點擊「添加到購物車」按鈕時才顯示。

我想讓div在2秒後再次消失。轉換會很好（例如淡入可見度），但我不介意。

Answer 1

將div的顯示設置爲none，併爲設置div的顯示屏幕的圖像執行onclick事件。我會建議使用JQuery來添加任何轉場或動畫。

喜歡的東西（不包括動畫）：

<div id="cart" style="display:none"> 

</div> 
<img src="imgsource" onClick="document.getElementById('cart').style.display = 'block'"/> 

Answer 2

工作了。必須使用jQuery。

在<頭>：

<script> 
$(document).ready(function(){ 
    $(".addtocart").click(function(){ 
    $(".addedcartbg").fadeIn(500); 
    $(".addedcartbg").delay(1000); 
    $(".addedcartbg").fadeOut(500); 
    }); 
}); 
</script> 

在<體>：

<div class="addedcartbg" style="display:none"><div class="addedcart"> Successfully added to cart. </div></div> 

Answer 3

CSS

.hide{ 
display:none; 
} 

HTML

<div class="hide"> 
// put content here 
</div> 
<img class="hide-show" src="site.com/image.png" alt=""/> 

個

JS

$(function(){ 
$('.hide-show').bind('click',function(){ 
    $('.hide').fadeIn(500).delay(2000).fadeOut(500); 

    }); 
});