javascript实现鼠标移到Image上方时显示文字效果的方法

 本文实例讲述了javascript实现鼠标移到Image上方时显示文字效果的方法。分享给大家供大家参考。具体如下：
先看一下运行效果截图：

具体代码如下：

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

希望本文所述对大家的javascript程序设计有所帮助。