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高级程序设计
Dec 29 Javascript
Tips 带三角可关闭的文字提示
Oct 06 Javascript
把jQuery的类、插件封装成seajs的模块的方法
Mar 12 Javascript
node.js中的fs.readFile方法使用说明
Dec 15 Javascript
理解JS事件循环
Jan 07 Javascript
Vue开发过程中遇到的疑惑知识点总结
Jan 20 Javascript
深入理解Vue transition源码分析
Jul 30 Javascript
基于ajax和jsonp的原生封装(实例)
Oct 16 Javascript
axios进阶实践之利用最优雅的方式写ajax请求
Dec 20 Javascript
jQuery封装animate.css的实例
Jan 04 jQuery
nuxt.js 缓存实践
Jun 25 Javascript
详解angularjs4部署文件过大解决过程
Dec 05 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作的文本留言本的例子(三)
2006/10/09 PHP
php class中public,private,protected的区别以及实例分析
2013/06/18 PHP
PHP中的函数-- foreach()的用法详解
2013/06/24 PHP
yii框架配置默认controller和action示例
2014/04/30 PHP
PHP中的常见魔术方法功能作用及用法实例
2015/07/01 PHP
Yii2验证器(Validator)用法分析
2016/07/23 PHP
Yii框架引用插件和ckeditor中body与P标签去除的方法
2017/01/19 PHP
PHP去除空数组且数组键名重置的讲解
2019/02/28 PHP
Javascript下的keyCode键码值表
2007/04/10 Javascript
JavaScript类属性的访问方式详解
2014/02/11 Javascript
简单选项卡 js和jquery制作方法分享
2014/02/26 Javascript
微信公众平台开发教程(六)获取个性二维码的实例
2016/12/02 Javascript
node.js Sequelize实现单实例字段或批量自增、自减
2016/12/08 Javascript
bootstrap table之通用方法( 时间控件,导出,动态下拉框, 表单验证 ,选中与获取信息)代码分享
2017/01/24 Javascript
微信小程序wx.request实现后台数据交互功能分析
2017/11/25 Javascript
详解Vue之事件处理
2020/07/10 Javascript
python实现文件名批量替换和内容替换
2014/03/20 Python
使用Python将字符串转换为格式化的日期时间字符串
2019/09/01 Python
Django项目使用ckeditor详解(不使用admin)
2019/12/17 Python
python爬虫多次请求超时的几种重试方法(6种)
2020/12/01 Python
HTML5+CSS3 诱人的实例:3D立方体旋转动画实例
2016/12/30 HTML / CSS
Html5基于canvas实现电子签名并生成PDF文档
2020/12/07 HTML / CSS
美国老牌主机服务商:iPage
2016/07/22 全球购物
沃达丰英国有限公司:Vodafone英国
2019/04/16 全球购物
SQL SERVER面试资料
2013/03/30 面试题
外企测试工程师面试题
2015/02/01 面试题
教师评优事迹材料
2014/01/10 职场文书
校园十大歌手策划书
2014/02/01 职场文书
《雨霖铃》教学反思
2014/02/22 职场文书
大学生优秀自荐信范文
2014/02/25 职场文书
带病坚持工作事迹
2014/05/03 职场文书
汽车修理厂管理制度
2015/08/05 职场文书
小学英语课教学反思
2016/02/15 职场文书
2016年清明节网上祭英烈活动总结
2016/04/01 职场文书
CSS布局之浮动(float)和定位(position)属性的区别
2021/09/25 HTML / CSS
Vue的生命周期一起来看看
2022/02/24 Vue.js