昨天做东西，用到了这个效果，以前收藏的代码段，现在派上用场了，不错！以后有好的东西再收藏分享给大家吧！代码不难理解，自己看效果吧！来源已经不知了，总之，感谢共享的哥们！ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <br /><br /> <html xmlns="http://www.w3.org/1999/xhtml"> <br /><br /> <head> <br /><br /> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <br /><br /> <title>分享一个<a target="_blank" href="https://yangjunwei.com/tag/%e5%9b%be%e7%89%87" class="tag-tooltip" data-toggle="tooltip" title="查看更多关于 图片 的文章" target="_blank">图片</a>显示的<a target="_blank" href="https://yangjunwei.com/tag/%e6%95%88%e6%9e%9c" class="tag-tooltip" data-toggle="tooltip" title="查看更多关于 效果 的文章" target="_blank">效果</a> nuodou.com</title> <br /><br /> <style> <br /><br /> body{ font-size:12px; line-height:1.8; font-family:Verdana, "宋体", Arial,Sans; text-align:center; background:#FFF; color:#666; margin:50px; padding:0; list-style:none; } <br /><br /> a:link,a:visited{color:#000099; text-decoration: underline;} <br /><br /> a:hover,a:active{color:#000;text-decoration: none;} <br /><br /> #tx li{ float:left; width:14%;text-align:center; margin:0 auto; list-style:none } <br /><br /> #tx li a{border-right:1px solid #fff;border-bottom:1px solid #fff; width:100px; height:110px; background:#fff;display:block; padding-top:10px; margin:auto} <br /><br /> #tx li img{ width:75px; height:75px; display:block; text-align:center; margin:auto; background:#FFF; padding:3px; border:1px solid #D8A18B;} <br /><br /> #tx li span{display:none;} <br /><br /> #tx li a:hover span{ margin-top:-10px;display:block; border-bottom:1px solid #666; border-right:1px solid #666; background:#FA9000; width:100px; color:#FFF; position:absolute; } <br /><br /> * html #tx li a:hover span {margin-left:-8px; } /* IE6 */ <br /><br /> *+html #tx li a:hover span {margin-left:-8px; }/* IE7*/ <br /><br /> #tx li a:hover{ border-right:1px solid #D8A18B;border-bottom:1px solid #D8A18B; width:100px; height:110px; background:#F5F5F5;display:block; padding-top:10px;} <br /><br /> </style> <br /><br /> </head> <br /><br /> <body> <br /><br /> <div id="tx"> <br /><br /> <ul> <br /><br /> <p><li><a href="https://yangjunwei.com"><span>64d / 47 hits</span><img src="https://yangjunwei.com/images/nuodou.gif"><a target="_blank" href="https://yangjunwei.com/tag/%e5%9b%be%e7%89%87" class="tag-tooltip" data-toggle="tooltip" title="查看更多关于 图片 的文章" target="_blank">图片</a>1</a></li> <br /><br /> <p><li><a href="https://yangjunwei.com"><span>24d / 35 hits</span><img src="https://yangjunwei.com/images/logo.gif"><a target="_blank" href="https://yangjunwei.com/tag/%e5%9b%be%e7%89%87" class="tag-tooltip" data-toggle="tooltip" title="查看更多关于 图片 的文章" target="_blank">图片</a>2</a></li> <br /><br /> <p><li><a href="https://yangjunwei.com"><span>66d / 87 hits</span><img src="https://yangjunwei.com/images/nuodou.gif">图片3</a></li> <br /><br /> <p><li><a href="https://yangjunwei.com"><span>40d / 34 hits</span><img src="https://yangjunwei.com/images/logo.gif">图片4</a></li> <br /><br /> <p><li><a href="https://yangjunwei.com"><span>47d / 56 hits</span><img src="https://yangjunwei.com/images/nuodou.gif">图片5</a></li> <br /><br /> <p><li><a href="https://yangjunwei.com"><span>42d / 36hits</span><img src="https://yangjunwei.com/images/logo.gif">图片6</a></li> <br /><br /> <p><li><a href="https://yangjunwei.com"><span>63d / 67 hits</span><img src="https://yangjunwei.com/images/nuodou.gif">图片7</a></li> <br /><br /> </ul> <br /><br /> </div> <br /><br /> <br /> <br /><br /> </body> <br /><br /> </html>
