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

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

WBOY

发布： 2016-05-16 15:46:20

原创

1957 人浏览过

本文实例讲述了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" / alt="javascript实现鼠标移到Image上方时显示文字效果的方法_javascript技巧" > </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" / alt="javascript实现鼠标移到Image上方时显示文字效果的方法_javascript技巧" > </div>
   <div class="detail">
   <div class="wqName">天天好心情</div>
   </div>
   </a> </li>
  </ul>
 </div>
 </div>
</div>
</body>
</html>

登录后复制

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