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

html-css014

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后执行

}

CSS属性里面有个position,使用fixed属性在配合left,top等就可以实现悬浮与某个位置且不会因为滚动而消失,

比如, <div style="positoon:fixed

bottom:0px

width:100%

height:70px

background:#000"> ......</div>

至于你说的滑到一般时才出现, 需要用javascript代码,捕获滚动事件,判断距离,就可以了,可以追问哦