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

 更新时间:2015年08月07日 14:55:04   作者:皮蛋  
这篇文章主要介绍了javascript实现鼠标移到Image上方时显示文字效果的方法,涉及javascript鼠标事件及图文属性动态设置的相关技巧,可用于为图片增加文字提示效果,需要的朋友可以参考下

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

相关文章

  • JavaScript中的声明提升实例详解

    JavaScript中的声明提升实例详解

    这篇文章主要为大家介绍了JavaScript中的声明提升实例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-11-11
  • js判断文本框输入的内容是否为数字

    js判断文本框输入的内容是否为数字

    这篇文章主要介绍了js判断文本框输入的内容是否为数字,本文为大家分享了验证文本框中的内容是否为数字的方法,感兴趣的小伙伴们可以参考一下
    2015-12-12
  • 小程序canvas实现画布半圆环

    小程序canvas实现画布半圆环

    这篇文章主要为大家详细介绍了小程序canvas实现画布半圆环,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-06-06
  • 子窗口、父窗口和Silverlight之间的相互调用

    子窗口、父窗口和Silverlight之间的相互调用

    前两天做 silverlight 的东西,主页面打开一个子页面,然后子页面中包含一个 silverlight 应用程序那难免会涉及到他们三者相互调用的问题
    2010-08-08
  • 最短的IE判断var ie=!-[1,]分析

    最短的IE判断var ie=!-[1,]分析

    下面通过分解这个语句来回顾下代码中所涉及到的javascript知识,需要的朋友可以参考下
    2014-05-05
  • element el-input 删除边框的实现

    element el-input 删除边框的实现

    本文主要介绍了element el-input 删除边框的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-04-04
  • 原生js操作checkbox用document.getElementById实现

    原生js操作checkbox用document.getElementById实现

    js操作checkbox本人建议用document.getElementById(checkbox_id).checked不推荐使用jquery操作checkbox,感兴趣的朋友不要错过
    2013-10-10
  • JavaScript中输出</script>标签的方法

    JavaScript中输出</script>标签的方法

    这篇文章主要介绍了JavaScript中输出</script>标签的方法,在一些广告代码中经常会用到这个小技巧,需要的朋友可以参考下
    2014-08-08
  • JavaScript滚动轮播图制作原理详解

    JavaScript滚动轮播图制作原理详解

    这篇文章主要为大家详细介绍了JavaScript滚动轮播图制作原理,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-03-03
  • html+css+js实现canvas跟随鼠标的小圆特效源码

    html+css+js实现canvas跟随鼠标的小圆特效源码

    这篇文章主要介绍了html+css+js实现canvas跟随鼠标的小圆特效源码,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2021-03-03

最新评论