鼠标触发图片文字说明的效果

当前位置：首页 > 网页设计 > 鼠标触发图片文字说明的效果

Sep13th

桶哥网页设计 2 人阅读了此文我来说两句！

如题。利用Css+div技术，一段简单的代码，即可实现此效果——鼠标经过图片，图片上方将出现一个蒙层，蒙层上面是该图片的说明、介绍文字；鼠标移开，文字即刻隐藏。这一技术效果，对一些以图片展示为主的站点来说，是很实用的。它能让页面上的布局达到最简化，即尽可能地排除文字的结构干扰，但同时又不会尚失必须的文字说明。OK，一起来看代码！（查看效果演示请直接点击“运行代码”按钮。）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<a href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" target="_blank" rel="external">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd</a>"> <html xmlns="<a href="http://www.w3.org/1999/xhtml" target="_blank" rel="external">http://www.w3.org/1999/xhtml</a>" lang="UTF-8"> <style type="text/css"> body{ background:#1d1d1d; } .imgteaser { margin: 0; overflow: hidden; float: left; position: relative; } .imgteaser a { text-decoration: none; float: left; } .imgteaser a:hover { cursor: pointer; } .imgteaser a img { float: left; margin: 0; border: none; padding: 10px; background: #fff; border: 1px solid #ddd; } .imgteaser a img { float: left; margin: 0; border: none; padding: 10px; background: #fff; border: 1px solid #ddd; } .imgteaser a .more { position: absolute; right: 20px; bottom: 20px; font-size: 12px; color: #fff; background: #000; padding: 5px 10px; filter:alpha(opacity=65); opacity:.65; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=65)"; /*--IE 8 Transparency--*/ } .imgteaser a:hover .desc{ display: block; font-size: 12px; padding: 10px 0; background: #111; filter:alpha(opacity=75); opacity:.75; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=75)"; /*--IE 8 Transparency--*/ color: #fff; position: absolute; bottom: 11px; left: 11px; padding: 10px; margin: 0; width: 400px; border-top: 1px solid #999; } .imgteaser a:hover .desc strong { display: block; margin-bottom: 5px; font-size:14px; } .imgteaser a .desc {display: none; } .imgteaser a:hover .more { visibility: hidden;} </style> </head> <body> <div class="imgteaser"> <a href="#"> <img src="/upload/2009/9/286.JPG"> <span class="more">» 关于</span> <span class="desc"> <strong>Diyidu.cn</strong>低一度{diyidu}出品，必是精品。请牢记我的永久域名：diyidu.cn。欢迎您收藏与订阅diyidu。 </span> </a> </div> </body> </html>
提示：您可以先修改部分代码再运行

本文出自：低一度，地址：http://www.diyidu.cn/post/image_wztx.html，转载须注明！

« 一个不错的在线logo制作站点 25G免费网络硬盘SkyDrive »

或许您会对下列文章感兴趣：

to "鼠标触发图片文字说明的效果" 引用该日志！

#1 Hobo 回复该留言 2009-9-13 16:12:33

恩，效果不错。
diyidu 于 2009-9-13 16:36:22 回复
希望能用得上。
#2 Life 回复该留言 2009-9-14 16:41:43

效果确实很好。
diyidu 于 2009-9-14 17:20:06 回复
问好下。

低一度