CSS鼠标经过时图片放大
<!doctype html public "-//w3c//dtd html 4.0 transitional//en">
<html>
<head>
<title> new document </title>
<meta name="generator" content="editplus">
<meta name="author" content="">
<meta name="keywords" content="">
<meta name="description" content="">
<style>
#enlarge {padding:0; margin:2em auto; list-style-type:none; width:440px; height:40px;}
#enlarge li {display:block; float:left; width:40px; height:40px; position:relative; margin-left:30px;}
#enlarge li a {display:block; width:40px; height:40px; background:transparent; overflow:hidden; position:relative;}
#enlarge li a img {width:100%; height:100%; border:0;}
#enlarge li a:hover {position:absolute; left:-20px; top:-20px; width:80px; height:80px; z-index:100;}
</style>
</head>
<body>
<ul id="enlarge">
<li><a href="http://handl163.blog.163.com/blog/#one"><img src="http://handl163.blog.163.com/blog/lines/image1.gif" alt="image 1" title="image 1" />image 1</a></li>
<li><a href="http://handl163.blog.163.com/blog/#two"><img src="http://handl163.blog.163.com/blog/lines/image2.gif" alt="image 2" title="image 2" />image 2</a></li>
<li><a href="http://handl163.blog.163.com/blog/#three"><img src="http://handl163.blog.163.com/blog/lines/image3.gif" alt="image 3" title="image 3" />image 3</a></li>
<li><a href="http://handl163.blog.163.com/blog/#four"><img src="http://handl163.blog.163.com/blog/lines/image4.gif" alt="image 4" title="image 4" />image 4</a></li>
<li><a href="http://handl163.blog.163.com/blog/#five"><img src="http://handl163.blog.163.com/blog/lines/image5.gif" alt="image 5" title="image 5" />image 5</a></li>
<li><a href="http://handl163.blog.163.com/blog/#six"><img src="http://handl163.blog.163.com/blog/lines/image6.gif" alt="image 6" title="image 6" />image 6</a></li>
</ul>
</body>
</html>
<html>
<head>
<title> new document </title>
<meta name="generator" content="editplus">
<meta name="author" content="">
<meta name="keywords" content="">
<meta name="description" content="">
<style>
#enlarge {padding:0; margin:2em auto; list-style-type:none; width:440px; height:40px;}
#enlarge li {display:block; float:left; width:40px; height:40px; position:relative; margin-left:30px;}
#enlarge li a {display:block; width:40px; height:40px; background:transparent; overflow:hidden; position:relative;}
#enlarge li a img {width:100%; height:100%; border:0;}
#enlarge li a:hover {position:absolute; left:-20px; top:-20px; width:80px; height:80px; z-index:100;}
</style>
</head>
<body>
<ul id="enlarge">
<li><a href="http://handl163.blog.163.com/blog/#one"><img src="http://handl163.blog.163.com/blog/lines/image1.gif" alt="image 1" title="image 1" />image 1</a></li>
<li><a href="http://handl163.blog.163.com/blog/#two"><img src="http://handl163.blog.163.com/blog/lines/image2.gif" alt="image 2" title="image 2" />image 2</a></li>
<li><a href="http://handl163.blog.163.com/blog/#three"><img src="http://handl163.blog.163.com/blog/lines/image3.gif" alt="image 3" title="image 3" />image 3</a></li>
<li><a href="http://handl163.blog.163.com/blog/#four"><img src="http://handl163.blog.163.com/blog/lines/image4.gif" alt="image 4" title="image 4" />image 4</a></li>
<li><a href="http://handl163.blog.163.com/blog/#five"><img src="http://handl163.blog.163.com/blog/lines/image5.gif" alt="image 5" title="image 5" />image 5</a></li>
<li><a href="http://handl163.blog.163.com/blog/#six"><img src="http://handl163.blog.163.com/blog/lines/image6.gif" alt="image 6" title="image 6" />image 6</a></li>
</ul>
</body>
</html>
