当前位置： > 网页特效 > 图片特效 > 文章内容

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

http://www.itjxue.com 2015-08-05 00:16 来源:未知 点击次数:

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

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

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

<!DOCTYPE <a href='http://www.itjxue.com/plus/search.php?kwtype=0&keyword=html&' target='_blank'><u>html</u></a> 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.itjxue.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 全部选择 ]

(责任编辑：IT教学网)

复制链接发给好友收藏本文关闭此页

上一篇：百度联盟中的一个不错的图片切换特效

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

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

(责任编辑：IT教学网)

相关图片特效文章

阅读排行

专题教程

推荐图片特效文章

最新更新图片特效