<!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://files.jb51.net/file_images/article/201508/201587150400220.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://files.jb51.net/file_images/article/201508/201587150400220.jpg"
class=
"wqPic"
/> </div>
<div class=
"detail"
>
<div class=
"wqName"
>天天好心情</div>
</div>
</a> </li>
</ul>
</div>
</div>
</div>
</body>
</html>