鼠标指到图片上会向上移动

标签：src   ref   pos   translate   href   nbsp   ima   chrome   代码   

css样式：

.anlibox{width: 1170px;position:relative; left:1.5%; top: 15%; margin:0 auto;}
.anli1{width:270px;}
.anli2{width:278px;}
.anli3{width:322px;}
.anli4{width:299px;}
.anli1 img, .anli2 img, .anli3 img, .anli4 img{transition: transform 0.5s; -webkit-transition: -webkit-transform 0.5s; /* Safari */ }
.anli1 img:hover, .anli2 img:hover, .anli3 img:hover, .anli4 img:hover{transform: translate(0px,-10px); -ms-transform: translate(0px,-10px); /* IE 9 */ -webkit-transform: translate(0px,-10px); /* Safari and Chrome */ }

html代码：

<ul class="oh pt10 pb50">
<li class="fl anli1"> <a rel="nofollow" href="photo.html"><img src="images/sj1.jpg" ></a> <a rel="nofollow" href="photo.html"><img src="images/sj5.jpg" ></a></li>
<li class="fl anli2"> <a rel="nofollow" href="photo.html"><img src="images/sj2.jpg" ></a> <a rel="nofollow" href="photo.html"><img src="images/sj6.jpg" ></a></li>
<li class="fl anli3"> <a rel="nofollow" href="photo.html"><img src="images/sj3.jpg" ></a> <a rel="nofollow" href="photo.html"><img src="images/sj7.jpg" ></a></li>
<li class="fl anli4"> <a rel="nofollow" href="photo.html"><img src="images/sj4.jpg" ></a> <a rel="nofollow" href="photo.html"><img src="images/sj8.jpg" ></a></li>
</ul>

鼠标指到图片上会向上移动

标签：src   ref   pos   translate   href   nbsp   ima   chrome   代码   

原文地址：http://www.cnblogs.com/good2008/p/7417206.html