<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
*{margin: 0; padding: 0;}
li{width: 59px;
height: 87px;
float: left;
margin: 20px;
background: #333333;
position: relative;
list-style: none;
}
/**display:inline;zoom:1 *vertical:top margin: 20px;改成 margin:0 20px;如果给ul浮动就没事了 双倍边距bug的条件 浮动 外编剧 块状元素 解决双倍边距bug
#div1{width: 594px; margin: 50px; border-top:1px solid #333;}
#div1 ul li div{
width: 232px;
height: 143px;
background: #666666 url("img/tip.png") no-repeat;
position: absolute;
top: -150px;
left: 20px;
display: none;
}
</style>
<script>
window.onload=function(){
var aLi= document.getElementsByTagName("li")
for(var i=0; i<aLi.length;i++){
aLi[i].onmouseover=function(){
this.getElementsByTagName("div")[0].style.display="block";
}
aLi[i].onmouseout=function(){
this.getElementsByTagName("div")[0].style.display="none";
}
}
}
</script>
</head>
<body>
<h1>最新上线</h1>
<div style="1px solid #000;" id="div1">
<ul class="ul1">
<li><img src="img/1.png" ><div></div></li>
<li><img src="img/2.png"><div></div></li>
<li><img src="img/3.png"><div></div></li>
<li><img src="img/4.png" ><div></div></li>
<li><img src="img/5.png" ><div></div></li>
<li><img src="img/6.png" ><div></div></li>
</ul>
<ul class="ul1">
<li><img src="img/7.png"><div></div></li>
<li><img src="img/8.png"><div></div></li>
<li><img src="img/9.png"><div></div></li>
<li><img src="img/10.png"><div></div></li>
<li><img src="img/11.png"><div></div></li>
<li><img src="img/12.png"><div></div></li>
</ul>
</div>
</body>
</html>
原文：http://www.cnblogs.com/aix1314/p/3810683.html