鼠标指向图片在图片上面出现文字提示

大中小文章来源：万象互联更新时间：2011-8-18 14:30:33

当别人在浏览你网页上一副精彩的图片时，你就可以用到这个特效，它可以使用户得到关于这张图片的更多信息。为了使这张图片更加的友好和人性化，我们最好添加一个“Learn More”按钮，来提示用户查看关于图片的更多信息，当然这个按钮是假的。

在默认的情况下，将会显示“Learn More”，而当我们将鼠标移动到图片时，我们将希望它被隐藏起来，于是，我们添加一下代码。

.imgteaser a .desc {display: none; }
.imgteaser a:hover .more {visibility: hidden;}

<!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: 566px; 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="http://www.webjx.com/files/090412/1_064325.jpg" /> <span class="more">» Learn More</span> <span class="desc"> <strong>DAIM 2002</strong> Blandit turpis patria euismod at iaceo appellatio, demoveo esse. Tation utrum utrum abigo demoveo immitto aliquam sino aliquip. </span> </a> </div> </body> </html>

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

版权说明:本站原创文章,由万象互联 SEO优化发表.
本文地址:https://www.hulian.top/zixun/post/4055.html

分享到：QQ空间新浪微博腾讯微博微信百度贴吧百度空间搜狐微博