鼠标指向图片在图片上面出现文字提示代码-网页编程网

当前位置：主页 >> 网页特效 >> 正文

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

阅读：4519 输入：2016-07-04 10:44:44

当别人在浏览你网页上一副精彩的图片时，你就可以用到这个特效，它可以使用户得到关于这张图片的更多信息。为了使这张图片更加的友好和人性化，我们最好添加一个“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.youkud.com/image/banner4.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>

相关阅读: 用JavaScript获取页面文档内容的实现代码; 为何firefox不支持insertRow和insertCell; js屏蔽网页中的错误提示信息