在图像上单击设置div可见性

Question

所以我在标签内部有一个图像，而且我还有一个以屏幕中间为中心的div。

在单击图像之前，如何使此div不可见？

div显示时的页面预览：

因此添加到购物车中的是屏幕中间的div。我希望只在单击“添加到购物车”按钮时显示。

我希望div在2秒后再次消失。转换会很好（例如淡入可见性），但我不介意。

Answer 1

将div的显示设置为none，并为图像执行onclick事件，将div的显示设置为block。我建议使用JQuery添加任何过渡或动画。

像（没有动画）的东西：

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

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

Answer 2

解决了这个问题。不得不使用jQuery。

＆lt;头＆GT; ：

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

＆lt;体＆GT; ：

<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);

    });
});