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

html-css016

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

}

CSS部分

div{

width: 400px

height: 400px

border:1px solid red

float: left

}

body:hover .box{

display: block

}

.box{

width: 200px

height: 200px

background: red

display: none

}

html部分

<div  >

<div class="box">

</div>

</div>

<HTML>

<HEAD>

<TITLE>New Document </TITLE>

<script type="text/javascript">

//在鼠标显示一个层，该层的内空为div2的内容

function showTip(){

var div3 = document.getElementById('div3')//将要弹出的层

div3.style.display="block"//div3初始状态是不可见的，设置可为可见

//window.event代表事件状态，如事件发生的元素，键盘状态，鼠标位置和鼠标按钮状.

//clientX是鼠标指针位置相对于窗口客户区域的 x 坐标，其中客户区域不包括窗口自身的控件和滚动条。

div3.style.left=event.clientX+10 //鼠标目前在X轴上的位置，加10是为了向右边移动10个px方便看到内容

div3.style.top=event.clientY+5

div3.style.position="absolute"//必须指定这个属性，否则div3层无法跟着鼠标动

var div2 =document.getElementById('div2')

div3.innerText=div2.innerHTML

}

//关闭层div3的显示

function closeTip(){

var div3 = document.getElementById('div3')

div3.style.display="none"

}

//控制层div2显示的开关

function switchDIV(){

if(div2.style.display=='block'){

div2.style.display='none'

}

else{

div2.style.display='block'

}

}

</script>

</HEAD>

<BODY>

<a href="#" onmousemove="showTip()" onmouseout="closeTip()" onclick="switchDIV()">链接</a>

<div id="div2" style="display:nonebackground-color:green">

<h1 color="blue">我是在div2里面的一句话!</h1>

</div>

<div id="div3" style="display:nonebackground-color :pinkwidth:250height:50">

</div>

</BODY>

</HTML>