html悬停(hover )

<!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>

posted @ 2012-05-23 22:54  1小松  阅读(1513)  评论(0编辑  收藏  举报