一、首先需要div布局：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js悬停</title>
<style type="text/css">
p {
width: 200px
height: 200px
background-color: skyblue
text-align: center
line-height: 200px
}
</style>
</head>
<body>
<p id="txt">我是一个DIV</p>
<script type="text/javascript">
var txt = document.getElementById('txt')
txt.setAttribute("title","鼠标悬停了")
</script>
</body>
</html>
二、div实在的在开发工具里面的代码效果如下截图：
三、这段代码最主要的重点是如下：
<script type="text/javascript">
var txt = document.getElementById('txt')
txt.setAttribute("title","鼠标悬停了")
</script>
四、实际代码在浏览器的渲染如下：
直接利用css就能办到鼠标移上去显示 离开隐藏的效果：<style>
#aa{position:relativewidth:300pxheight:200px}
#aa img{display:blockwidth:100%height:100%}
#aa span{display:none}
#aa:hover span{position:absoluteleft:0bottom:0display:blockwidth:100%height:30pxline-height:30pxtext-align:centercolor:#eee}
</style>
JS写法：
<script>
window.onload = function(){
var box = document.getElementById('aa')
box.onmouseover = function(){
this.getElementsByTagName('span')[0].style.display = 'block'
}
box.onmouseout = function(){
this.getElementsByTagName('span')[0].style.display = 'none'
}
}
</script>
<div id="aa">
<img src="http://pic31.nipic.com/20130725/5252423_162905249000_2.jpg" />
<span>文字内容</span>
</div>
