<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>
实现鼠标悬停在图片上底部弹出文字内容的实现方法：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
}
思路应该是一个从0%到100%的动画展开的效果，大概需要写0%，50%，100%三个样式。 弹窗的css代码大概是:position: fixedz-index: 2000left: 0top: 0这样弹窗的左上角原点在页面最左上角，如果要调整位置要用CSS变换特效(transform)的平移translate函数达到目的: translate(x, y)（长度值或者百分比）：在水平方向、垂直方向平移元素。 translateX(value)：水平方向平移。 translateY(value)：垂直方向平移。 scale(x, y)、scaleX(value)、scaleY(value)：在水平方向、垂直方向或者两个方向上缩放元素。 rotate()、rotateX()、rotateY()、rotateZ()：rotate支持3D效果，可在x、y、z轴上旋转元素。 skew()、skewX()、skewY()：在水平方向、垂直方向或者两个方向倾斜一定的角度。 另外弹窗展开的动画要用到css3的动画属性: animation-delay：设置动画开始前的延迟时间。 animation-direction：设置动画循环播放的时候是否方向播放，包含normal和alternate两个值。 animation-duration：设置动画播放持续的时间。 animation-interacion-count：设置动画的播放次数，可以为具体数据或者无限循环关键字infinite。 animation-name：指定动画名称。 animation-play-state：允许动画暂停和重新播放，包含running、paused。 animation-timing-function：指定如何计算中间动画值，
