纯css 鼠标移上查看大图的效果

2021-08-08 15:29:27

纯css 鼠标移上查看大图的效果...

<!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=gb2312" /> 
<title>无标题文档</title> 
<style type="text/css"> 
* { 
margin:0; 
padding:0; 
} 
img {border:0;} 
#main_body { 
width:730px; 
margin:100px auto 0; 
padding:10px 0 30px 10px; 
border:#CCCCCC 1px solid; 
background-color:#E6E6E6; 
font-size:12px; 
} 
#main_body ul { 
height:210px; 
} 
#main_body li { 
float:left; 
height:210px; 
width:24.5%; 
overflow:visible; 
list-style:none; 
list-style-position:outside; 
} 
#main_body a span img { 
margin:0 auto; 
width:100%; 
} 
.main a:link span, .main a:visited span { 
width:160px; 
height:160px; 
border:1px solid #ccc; 
padding:1px; 
overflow:hidden; 
display:block; 
} 
.main a:link, .main a:visited { 
margin:0 auto; 
height:210px; 
width:166px; 
display:block; 
} 
.main a:hover, .main a:active { 
width:232px; 
height:300px; 
position:relative; 
overflow:hidden; 
left:50%; 
margin-left:-100px; 
margin-top:-64px; 
z-index:100px; 
cursor:pointer; 
} 
.main a:hover span, .main a:active span{ 
width:220px; 
height:220px; 
display:block; 
overflow:hidden; 
background:#fff; 
padding:2px; 
border:2px solid #e6e2e3; 
} 
.main a.last:hover, .main a.last:active { 
width:232px; 
height:300px; 
position:relative; 
overflow:hidden; 
left:50%; 
margin-left:-123px; 
z-index:100px; 
cursor:pointer; 
} 
.main a b { 
width:160px; 
margin:6px auto 2px; 
display:block; 
overflow:hidden; 
text-align:center; 
height:36px; 
line-height:18px; 
font-weight:normal; 
} 
.main a em { 
width:160px; 
margin:0 auto; 
line-height:18px; 
font-weight:bold; 
color:#FF6600; 
display:block; 
text-align:center; 
}

</style> 
</head> 
<body> 
<div id="main_body" class="main"> 
<ul> 
<li><a href="#" target="_blank"><img src="http://img08.taobaocdn.com/bao/uploaded/i8/T13t0eXdgtK0KKdRA2_044834.jpg_b.jpg" />【男人密码】★【七匹狼】高档男士休闲西服单件 00834203￥：268.0</a></li> 
<li><a href="#" target="_blank"><img src="http://img08.taobaocdn.com/bao/uploaded/i8/T13t0eXdgtK0KKdRA2_044834.jpg_b.jpg" />【男人密码】★【七匹狼】高档男士休闲西服单件 00834203￥：268.0</a></li> 
<li><a href="#" target="_blank"><img src="http://img08.taobaocdn.com/bao/uploaded/i8/T13t0eXdgtK0KKdRA2_044834.jpg_b.jpg" />【男人密码】★【七匹狼】高档男士休闲西服单件 00834203￥：268.0</a></li> 
<li><a href="#" target="_blank" class="last"><img src="http://img08.taobaocdn.com/bao/uploaded/i8/T13t0eXdgtK0KKdRA2_044834.jpg_b.jpg" />【男人密码】★【七匹狼】高档男士休闲西服单件 00834203￥：268.0</a></li> 
</ul> 
<div> 
</body> 
</html>

提示：您可以先修改部分代码再运行