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 相关文章推荐
可缩放Reloaded-一个针对可缩放元素的复用组件
Mar 10 Javascript
用js格式化金额可设置保留的小数位数
May 09 Javascript
Javascript中的回调函数和匿名函数的回调示例介绍
May 12 Javascript
js使用Array.prototype.sort()对数组对象排序的方法
Jan 28 Javascript
js enter键激发事件实例代码
Aug 17 Javascript
javascript设计模式Constructor(构造器)模式
Aug 19 Javascript
微信小程序 toast 详解及实例代码
Nov 09 Javascript
JavaScript实现父子dom同时绑定两个点击事件,一个用捕获,一个用冒泡时执行顺序的方法
Mar 30 Javascript
vue el-tree 默认展开第一个节点的实现代码
May 15 Javascript
如何用JS模拟实现数组的map方法
Jul 30 Javascript
vue自定义组件实现双向绑定
Jan 13 Vue.js
JS的深浅复制详细
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
中国第一家无线电行
2021/03/01 无线电
php笔记之:有规律大文件的读取与写入的分析
2013/04/26 PHP
CI框架实现创建自定义类库的方法
2018/12/25 PHP
php7 新增功能实例总结
2020/05/25 PHP
js unicode 编码解析关于数据转换为中文的两种方法
2014/04/21 Javascript
JS合并数组的几种方法及优劣比较
2014/09/19 Javascript
jQuery添加options点击事件并传值实例代码
2016/05/18 Javascript
深入理解jQuery3.0的domManip函数
2016/09/01 Javascript
jQuery实现简单的网页换肤效果示例
2016/09/18 Javascript
AngularJS实现在ng-Options加上index的解决方法
2016/11/03 Javascript
node.js的事件机制
2017/02/08 Javascript
详解使用PM2管理nodejs进程
2017/10/24 NodeJs
深入浅析Vue中的slots/scoped slots
2018/04/03 Javascript
详解Vue实战指南之依赖注入(provide/inject)
2018/11/13 Javascript
[01:42]TI4西雅图DOTA2前线报道 第一顿早饭哦
2014/07/08 DOTA
[08:40]Navi Vs Newbee
2018/06/07 DOTA
Python变量作用范围实例分析
2015/07/07 Python
python数据结构之图深度优先和广度优先实例详解
2015/07/08 Python
Python多线程下载文件的方法
2015/07/10 Python
一篇文章入门Python生态系统(Python新手入门指导)
2015/12/11 Python
深入理解NumPy简明教程---数组2
2016/12/17 Python
python和shell获取文本内容的方法
2018/06/05 Python
Tensorflow 实现修改张量特定元素的值方法
2018/07/30 Python
在Python中分别打印列表中的每一个元素方法
2018/11/07 Python
Django和Flask框架优缺点对比
2019/10/24 Python
Python队列、进程间通信、线程案例
2019/10/25 Python
利用Python实现Json序列化库的方法步骤
2020/09/09 Python
First Aid Beauty官网:FAB急救面霜
2018/05/24 全球购物
美国一家著名的手表在线折扣网站:Discount Watch Store
2020/02/24 全球购物
如何利用cmp命令比较文件
2013/09/23 面试题
初三物理教学反思
2014/01/21 职场文书
大学生违纪检讨书范文
2015/05/07 职场文书
三下乡活动心得体会
2016/01/23 职场文书
安装pytorch时报sslerror错误的解决方案
2021/05/17 Python
CSS布局之浮动(float)和定位(position)属性的区别
2021/09/25 HTML / CSS
Oracle使用别名的好处
2022/04/19 Oracle