纯CSS放大图片 理论兼容ie6

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>鼠标滑过缩略图时放大图片</title>
<style type="text/css">
<!--
* {margin:0;padding:0;}
body {font-family:Verdana, Arial, Helvetica, sans-serif; font-size:12px;}
img {border:0}
p {font-size:14px;}
#imgmove li {float:left; width:50px; height:80px; display:block; overflow:visible;*overflow:hidden;
margin:0px 5px; border:3px #333 solid;position:relative;*position:static;}
#imgmove img {position:absolute;left:0px;top:0px;clip:rect(0px 50px 80px 0px);width:50px; z-index: 0;*position:static;}
#imgmove img:hover {position:relative; left:-3px; top:-3px; border:3px #f00 solid; z-index:2; width:1080px; clip:rect(0px 1080px 137px 0px);}
-->
</style>
</head>
<body>

<!--[if IE 6]><a href="#"><![endif]-->
<ul id="imgmove">
<li><img src="我的收益.jpg" /></li>
</ul>
<!--[if IE 6]></a><![endif]-->
</body>
</html>

posted @ 2016-11-04 17:11  青悠  阅读(144)  评论(0)    收藏  举报