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

2024-07-11 08:37:42

字体：大中小

来源：转载

供稿：网友

<br /><!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”><br /><html xmlns=”http://www.w3.org/1999/xhtml”><br /><head><br /><meta http-equiv=”Content-Type” content=”text/html; charset=gb2312″ /><br /><title>无标题文档</title><br /><style type=”text/css”><br />* {<br />margin:0;<br />padding:0;<br />}<br />img {border:0;}<br />#main_body {<br />width:730px;<br />margin:100px auto 0;<br />padding:10px 0 30px 10px;<br />border:#CCCCCC 1px solid;<br />background-color:#E6E6E6;<br />font-size:12px;<br />}<br />#main_body ul {<br />height:210px;<br />}<br />#main_body li {<br />float:left;<br />height:210px;<br />width:24.5%;<br />overflow:visible;<br />list-style:none;<br />list-style-position:outside;<br />}<br />#main_body a span img {<br />margin:0 auto;<br />width:100%;<br />}<br />.main a:link span, .main a:visited span {<br />width:160px;<br />height:160px;<br />border:1px solid #ccc;<br />padding:1px;<br />overflow:hidden;<br />display:block;<br />}<br />.main a:link, .main a:visited {<br />margin:0 auto;<br />height:210px;<br />width:166px;<br />display:block;<br />}<br />.main a:hover, .main a:active {<br />width:232px;<br />height:300px;<br />position:relative;<br />overflow:hidden;<br />left:50%;<br />margin-left:-100px;<br />margin-top:-64px;<br />z-index:100px;<br />cursor:pointer;<br />}<br />.main a:hover span, .main a:active span{<br />width:220px;<br />height:220px;<br />display:block;<br />overflow:hidden;<br />background:#fff;<br />padding:2px;<br />border:2px solid #e6e2e3;<br />}<br />.main a.last:hover, .main a.last:active {<br />width:232px;<br />height:300px;<br />position:relative;<br />overflow:hidden;<br />left:50%;<br />margin-left:-123px;<br />z-index:100px;<br />cursor:pointer;<br />}<br />.main a b {<br />width:160px;<br />margin:6px auto 2px;<br />display:block;<br />overflow:hidden;<br />text-align:center;<br />height:36px;<br />line-height:18px;<br />font-weight:normal;<br />}<br />.main a em {<br />width:160px;<br />margin:0 auto;<br />line-height:18px;<br />font-weight:bold;<br />color:#FF6600;<br />display:block;<br />text-align:center;<br />} </p><p></style><br /></head><br /><body><br /><div id=”main_body” class=”main”><br /><ul><br /><li><a href=”#” target=”_blank”><span><img src=”http://huoche.7234.cn/images/jb51/r51dtog21tr.jpg_b.jpg” /></span><b>【男人密码】★【七匹狼】高档男士休闲西服单件 00834203</b><em>￥：268.0</em></a></li><br /><li><a href=”#” target=”_blank”><span><img src=”http://huoche.7234.cn/images/jb51/r51dtog21tr.jpg_b.jpg” /></span><b>【男人密码】★【七匹狼】高档男士休闲西服单件 00834203</b><em>￥：268.0</em></a></li> </SPAN> </div> </div> <div class=page1> <p align="center" class="pageLink"></p> </div> <div class="fenxiang">  <div style="text-align:left">上一篇：<a href='/wen/2024/07-11/1342672.html'>hCalendar微格式关于事件和基于时间或地点的活</a></div> <br> <div style="text-align:left">下一篇：<a href='/wen/2024/07-11/1342674.html'>纯CSS搞定按钮、链接点击时的虚线</a></div> <br> <script src=/d/js/acmsd/gao21.js></script>  </div> <div class="pinglun">  <script> function CheckPl(obj) { if(obj.saytext.value=="") { alert("您没什么话要说吗？"); obj.saytext.focus(); return false; } return true; } </script><form action="/e/pl/doaction.php" method="post" name="saypl" id="saypl" onsubmit="return CheckPl(document.saypl)"> <table width="100%" border="0" cellpadding="0" cellspacing="0" id="plpost"> <tr> <td><table width="100%" border="0" cellpadding="0" cellspacing="0" class="title"> <tr> <td><strong>发表评论</strong></td> <td align="right"><a href="/e/pl/?classid=215&id=1342673">共有<span><script type="text/javascript" src="/e/public/ViewClick/?classid=215&id=1342673&down=2"></script></span>条评论</a></td> </tr> </table> <table width="100%" border="0" cellspacing="10" cellpadding="0"> <tr> <td><table width="100%" border="0" cellpadding="0" cellspacing="2"> <tr> <td width="56%" align="left">用户名: <input name="username" type="text" class="inputText" id="username" value="" size="16" /></td> <td width="44%" align="left">密码: <input name="password" type="password" class="inputText" id="password" value="" size="16" /></td> </tr> <tr> <td align="left">验证码: <input name="key" type="text" class="inputText" size="10" /> <img src="/e/ShowKey/?v=pl" align="absmiddle" /> </td> <td align="left"><input name="nomember" type="checkbox" id="nomember" value="1" checked="checked" /> 匿名发表</td> </tr> </table> <textarea name="saytext" cols="70" rows="6" id="saytext">

学习交流