CSS如何实现鼠标悬停在图片上底部弹出文字内容？

html-css08

CSS如何实现鼠标悬停在图片上底部弹出文字内容？,第1张

实现鼠标悬停在图片上底部弹出文字内容的实现方法：

HTML代码:

<div id="wrapper">

<img src="http://placehold.it/300x200" class="hover" />

<p class="text">text</p>

</div>

CSS代码：

#wrapper .text {

position:relative

bottom:30px

left:0px

visibility:hidden

}

#wrapper:hover .text {

visibility:visible

}

window.onload = function(){

    function closeAlert()

    {

    document.getElementById("login_alert").style.display="none"

    }

    

    setTimeOut(closeAlert,5000)//5s后执行

}