<!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">
a img
{
border:none;
}
span{/*span是行内元素;div是块级元素;他们都是容器!决定了大图的显示*/
display:none;
position:relative;
}
a:hover span{/*(:hover 伪类在鼠标移到元素上时向此元素添加特殊的样式。)*/
display:block;
}
.img2{/*鼠标悬停时大图在left和top的位置显示*/
position:absolute;
left:35px;/*大图以小图为参照的显示位置*/
top:-50px;
width:330px;/*悬停后的大图,大小!*/
height:430px;
}
</style>
</head>
<body>
<a href="#"><img src="image/右.jpg"alt="" width="176" height="210" /><span><img class="img2" src="image/右.jpg" alt="" /></span></a>
</body>
</html>
转载于:https://www.cnblogs.com/song336688/archive/2012/05/23/2515460.html