双边框的网页图片而且鼠标经过背景变色

双边框的网页图片而且鼠标经过背景变色: 大中小文章来源：中国互联更新时间：2011-8-18

分享到：

<p>CSS实现双边框的图片,鼠标经过背景变色。</p> <p align="center"><textarea class="fm" id="code" style="WIDTH: 490px; HEIGHT: 466px" rows="27" cols="78"><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>CSS实现双边框的图片,鼠标经过背景变色</title> <style> *{ margin:0; padding:0; list-style:none; font-size:14px; } h1{ margin:10px; } img{ border:1px solid #ccc; } .info li { padding:5px; width:144px; float:left; } .info li .img { padding:5px; border:1px solid #CBCBCB; display:block; } .info li .img:link,.info li .img:visited { border:1px solid #CBCBCB; } .info li .img:hover{ border:1px solid #CBCBCB; background:#f0f0f0; color:red; } span{ display:block; width:100%; clear:both; text-align:center; } </style> </head> <body> <div class="info"> <ul> <li><a href="http://www.webjx.com/" class="img" ><img src="http://www.webjx.com/files/allimg/090921/1448080.jpg" /><span>图片名称</span></a></li> <li><a href="http://www.webjx.com/" class="img" ><img src="http://www.webjx.com/files/allimg/090921/1448080.jpg" /><span>图片名称</span></a></li> <li><a href="http://www.webjx.com/" class="img" ><img src="http://www.webjx.com/files/allimg/090921/1448080.jpg" /><span>图片名称</span></a></li> </ul> </div> </body>

[ 提示：你可先修改部分代码，再按Ctrl+A 全部选择 ]

分享到：复制地址新浪微博腾讯微博 QQ空间开心网人人网百度空间百度贴吧网易微博搜狐微博