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

您现在的位置：万象互联帮助中心>> 最新资讯>>详细内容

<<返回上一页

鼠标指向图片在图片上面出现文字提示: 大中小文章来源：万象互联更新时间：2011-8-18

分享到：

<p>当别人在浏览你网页上一副精彩的图片时，你就可以用到这个特效，它可以使用户得到关于这张图片的更多信息。为了使这张图片更加的友好和人性化，我们最好添加一个“Learn More”按钮，来提示用户查看关于图片的更多信息，当然这个按钮是假的。</p> <p>在默认的情况下，将会显示“Learn More”，而当我们将鼠标移动到图片时，我们将希望它被隐藏起来，于是，我们添加一下代码。</p> <p>.imgteaser a .desc {display: none; }<br />.imgteaser a:hover .more {visibility: hidden;}</p> <p align="center"><textarea class="fm" id="code" style="WIDTH: 490px; HEIGHT: 466px" rows="27" cols="78"><!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 全部选择 ]

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

上一篇：鼠标指向网页图片时图片周围显示虚线框

下一篇：鼠标感应的网页图片展示特效

广告联盟中的CPA、CPS、CPC、CPM分别是什么意思