纯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="https://www.easck.com/d/file/190314/191KI5b-0.jpg" />【男人密码】★【七匹狼】高档男士休闲西服单件 00834203￥：268.0</a></li> 
<li><a href="#" target="_blank"><img src="https://www.easck.com/d/file/190314/191KI5b-0.jpg" />【男人密码】★【七匹狼】高档男士休闲西服单件 00834203￥：268.0</a></li> 
<li><a href="#" target="_blank"><img src="https://www.easck.com/d/file/190314/191KI5b-0.jpg" />【男人密码】★【七匹狼】高档男士休闲西服单件 00834203￥：268.0</a></li> 
<li><a href="#" target="_blank" class="last"><img src="https://www.easck.com/d/file/190314/191KI5b-0.jpg" />【男人密码】★【七匹狼】高档男士休闲西服单件 00834203￥：268.0</a></li> 
</ul> 
<div> 
</body> 
</html>

1/2 1 2 下一页尾页

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

H5页面使用audio标签播放音频

2345手机助手怎么下载音乐/铃声 2345手机助手下载音

靠谱助手怎么ROOT 靠谱助手一键root图文教程

js开发中的页面、屏幕、浏览器的位置原理（高度宽度）说明

安卓模拟器bluestacks安装不了解决办法

CSS填充和宽高详解

photoshop打造真人手绘图

XSplit登陆慢、无法登陆的解决办法

电子书制作排版教程

PP加速器新窗口独立视频功能