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程序设计有所帮助。