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


Posted in Javascript onAugust 07, 2015

本文实例讲述了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="//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 &amp;&amp;和||运算法的另类使用技巧
Nov 28 Javascript
jQuery 开发者应该注意的9个错误
May 03 Javascript
基于jquery扩展漂亮的下拉框可以二次修改
Nov 19 Javascript
js传中文参数controller里获取参数乱码问题解决方法
Jan 03 Javascript
javascript定义变量时加var与不加var的区别
Dec 22 Javascript
详解jQuery中基本的动画方法
Dec 14 Javascript
Django1.7+JQuery+Ajax验证用户注册集成小例子
Apr 08 jQuery
jQuery实现每隔一段时间自动更换样式的方法分析
May 03 jQuery
JS实现点击生成UUID的方法完整实例【基于jQuery】
Jun 12 jQuery
Vue.js计算机属性computed和methods方法详解
Oct 12 Javascript
在vue中实现给每个页面顶部设置title
Jul 29 Javascript
ajax请求前端跨域问题原因及解决方案
Oct 16 Javascript
jquery简单实现网页层的展开与收缩效果
Aug 07 #Javascript
javascript+HTML5的Canvas实现Lab单车动画效果
Aug 07 #Javascript
jQuery实现仿腾讯视频列表分页效果的方法
Aug 07 #Javascript
jQuery使用animate创建动画用法实例
Aug 07 #Javascript
浅谈JavaScript 的执行顺序
Aug 07 #Javascript
javascript封装 Cookie 应用接口
Aug 07 #Javascript
jQuery实现鼠标经过弹出提示信息的地图热点效果
Aug 07 #Javascript
You might like
php中$_REQUEST、$_POST、$_GET的区别和联系小结
2011/11/23 PHP
关于PHP实现异步操作的研究
2013/02/03 PHP
php如何连接sql server
2015/10/16 PHP
键盘 keycode的值 javascript时触发事件时很有用的要素
2009/11/02 Javascript
Jquery ajaxsubmit上传图片实现代码
2010/11/04 Javascript
javascript实现的使用方向键控制光标在table单元格中切换
2010/11/17 Javascript
jquery插件开发方法(初学者)
2012/02/03 Javascript
jQuery UI Autocomplete 1.8.16 中文输入修正代码
2012/04/16 Javascript
如何改进javascript代码的性能
2015/04/02 Javascript
JavaScript控制网页层收起和展开效果的方法
2015/04/15 Javascript
javascript 用函数实现继承详解
2016/05/28 Javascript
JS对象深度克隆实例分析
2017/03/16 Javascript
老生常谈javascript的面向对象思想
2017/08/22 Javascript
Js利用console计算代码运行时间的方法示例
2017/09/24 Javascript
jquery 输入框查找关键字并提亮颜色的实例代码
2018/01/23 jQuery
使用koa2创建web项目的方法步骤
2019/03/12 Javascript
快速解决Vue、element-ui的resetFields()方法重置表单无效的问题
2020/08/12 Javascript
[01:14:10]2014 DOTA2国际邀请赛中国区预选赛 SPD-GAMING VS Orenda
2014/05/22 DOTA
使用PDB模式调试Python程序介绍
2015/04/05 Python
python使用turtle库绘制树
2018/06/25 Python
Python测试网络连通性示例【基于ping】
2018/08/03 Python
tensorflow使用神经网络实现mnist分类
2018/09/08 Python
python 通过视频url获取视频的宽高方式
2019/12/10 Python
python脚本后台执行方式
2019/12/21 Python
python闭包、深浅拷贝、垃圾回收、with语句知识点汇总
2020/03/11 Python
详解使用HTML5的classList属性操作CSS类
2017/10/13 HTML / CSS
HTML5 video进入全屏和退出全屏的实现方法
2020/07/28 HTML / CSS
耐克中国官方商城:Nike中国
2018/10/18 全球购物
Farfetch美国:奢侈品牌时尚购物平台
2019/05/02 全球购物
高校毕业生自我鉴定
2013/10/27 职场文书
葡萄牙语专业个人求职信
2013/12/10 职场文书
外企办公室竞聘演讲稿
2013/12/29 职场文书
小学教师事迹材料
2014/01/13 职场文书
安卓程序员求职信
2014/02/28 职场文书
2015年依法治校工作总结
2015/07/27 职场文书
2019财务管理制度最新范本!
2019/07/09 职场文书