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

当前位置: 首页 > 图文教程 > 网页特效 > 图片特效 > 鼠标指向图片在图片上面出现文字提示

图片特效: 网站常用的一种JS的图片幻灯片特效代码; 不间断连续向上滚动的图片特效; 网页左右浮动广告特效代码; 网页上部图片规定时间消失的特效; 网页特定区域连续滚动的图片特效; 文字和图片同时变换的网页特效; 符合网站标准的图片切换特效(天极软件); 百度联盟中的一个不错的图片切换特效; 刷新一次显示不同图片的特效代码; 强制网页图片自适应大小的网页特效代码; MSN女性频道好看的缓动超酷图片特效; 新浪女性频道图片切换特效; 土豆网首页轮换图片特效代码; 独具个性的网页相册; 鼠标感应的网页图片展示特效; 鼠标指向图片在图片上面出现文字提示; 鼠标指向网页图片时图片周围显示虚线框; 网页图片放大预览网页特效代码; JS实现模拟FLASH幻灯片图片切换网页特效; 网页图片旋转的网页特效代码

No. « 1 2 › »

技术文章搜索

关键字

图片特效中的鼠标指向图片在图片上面出现文字提示

出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-10-10 浏览: 299 ::

收藏到网摘: n/a

鼠标感应的网页图片展示特效鼠标指向网页图片时图片周围显示虚线框

当别人在浏览你网页上一副精彩的图片时，你就可以用到这个特效，它可以使用户得到关于这张图片的更多信息。为了使这张图片更加的友好和人性化，我们最好添加一个“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="/upload/tech/20091010/20091010012831_6bc24fc1ab650b25b4114e93a98f1eba.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 全部选择 ]

鼠标感应的网页图片展示特效鼠标指向网页图片时图片周围显示虚线框

图片特效 中的 鼠标指向图片在图片上面出现文字提示

评论 (0) All

图片特效中的鼠标指向图片在图片上面出现文字提示