- jquery鼠标移到Image图片上时显示文字说明的效果，算是一个小小的jquery特效吧，用作图片说明，或者图片提示之类的，预览一下效果你就会明白了，现在网上见的多了。
-
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery鼠标移到Image上方时显示文字效果</title>
<style>
.bot .sendList {
margin-right:6px
}
.explore {
width:936px;
margin:20px auto 0;
overflow:hidden;
position:relative;
font-size:0px;
}
.explore li {
width:160px;
height:150px;
overflow:hidden;
display:inline-block;
position:relative;
}
.explore li {
*display:inline;
}
.explore li .wqPic {
width:160px;
height:150px;
overflow:hidden;
}
.explore .wqLink {
display:block;
width:160px;
height:150px;
color:#FFF;
text-align:center;
font-family:"微软雅黑"
}
.explore .wqItem .wqName {
position:absolute;
bottom:0;
left:0;
width:130px;
height:40px;
line-height:40px;
font-size:16px;
overflow:hidden;
padding:0 10px;
}
.explore .wqItem .bg {
background:#333;
opacity:0.8;
filter:alpha(opacity = 80);
position:absolute;
bottom:0;
left:0;
width:150px;
height:40px;
}
.explore .wqLink:hover {
cursor:pointer;
text-decoration:none;
}
.explore .wqLink:hover .wqItem .bg {
height:150px;
}
.explore .wqLink:hover .wqItem .wqName, .explore .detail {
visibility:hidden;
}
.explore .wqLink:hover .detail {
visibility:visible;
}
.explore .detail {
background:#000;
position:absolute;
top:128px;
left:0;
width:160px;
line-height:22px;
height:22px;
font-size:12px;
filter:alpha(opacity = 65);
}
.explore .detail .wqName {
font-size:16px;
padding:0 10px;
line-height:22px;
}
.explore .detail .info {
margin-top:10px;
}
</style>
</head>
<body>
<div id="topWrap">
<div class="wqSquare">
<div class="explore">
<ul>
<li> <a onmousedown="MI.Bos('wQBtnBigImgQun')" href="#" class="wqLink">
<div class="wqItem"> <img src="http://www.codesocang.com/uploads/allimg/140605/2-1406050RK80-L.jpg" class="wqPic" /> </div>
<div class="detail">
<div class="wqName">天天好心情</div>
</div>
</a> </li>
<li> <a onmousedown="MI.Bos('wQBtnBigImgQun')" href="#" class="wqLink">
<div class="wqItem"> <img src="http://www.codesocang.com/uploads/allimg/140605/2-1406050S2010-L.jpg" class="wqPic" /> </div>
<div class="detail">
<div class="wqName">天天好心情</div>
</div>
</a> </li>
</ul>
</div>
</div>
</div>
</body>
</html>
标签：网站源码
下一篇：没有了