当前位置：首页 > 网页特效 > 表格图层 >

jquery鼠标移到Image图片上时显示文字说明

时间：2014-07-04 08:31 来源：互联网作者：源码搜藏收藏推荐

<!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>

运行代码保存代码复制代码提示：您可以先修改部分代码再运行，保存代码功能在Firefox下无效。

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://p1.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://p1.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>