主页 / 网络编程 /

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

网络编程 2021-07-04 21:48www.168986.cn编程入门
这篇文章主要介绍了javascript实现鼠标移到Image上方时显示文字效果的方法,涉及javascript鼠标事件及图文属性动态设置的相关技巧,可用于为图片增加文字提示效果,需要的朋友可以参考下

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

先看一下运行效果截图

具体代码如下

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://.w3./TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://.w3./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;
  :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-:10px;
}
</style>
</head>
<body>
<div id="Wrap">
 <div class="wqSquare">
 <div class="explore">
  <ul>
  <li> <a onmousedown="MI.Bos('wQBtnBigImgQun')" href="#" class="wqLink">
   <div class="wqItem"> <img src="//img.jbzj./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="//img.jbzj./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简单实现网页层的展开与收缩效果

编程语言

Copyright © 2016-2025 www.168986.cn 狼蚁网络 版权所有 Power by