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

ttx9n · 发表于 2009-4-14 14:30:47

一个简单的效果，鼠标移到图片上就可以显示查看该图片的大图，完全用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>

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

e8hwl6prw · 发表于 2022-8-9 09:16:38

大家都不容易！

kwzc65wdj · 发表于 2022-10-7 16:44:31

快更新啊，我擦

6q8s6p21 · 发表于 2023-6-4 08:28:15

问问问企鹅哇哇哇哇哇

3pjdk29w · 发表于 2023-8-16 21:25:33

的vgdsvsdvdsvdsvds

q215357618 · 发表于 2023-11-13 21:51:59

vcxvcxv

wxrf98xr · 发表于 2024-4-19 18:20:04

额头额定法国队是范德萨

a75620618 · 发表于 2024-5-25 20:36:37

我找了挺久终于找到了

kwzc65wdj · 发表于 2024-8-7 11:00:56

收下来看看怎么样

v3sfsi · 发表于 2024-9-22 02:46:18

好东西可以可以可以可以

账号		自动登录	找回密码
密码			立即注册

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

相关帖子