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

2019-11-20 11:53:25

字体：大中小

来源：转载

供稿：网友

本文实例讲述了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="//files.VeVB.COm/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="//files.VeVB.COm/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程序设计有所帮助。

上一篇：jQuery实现仿百度帖吧头部固定导航效果

下一篇：jquery简单实现网页层的展开与收缩效果