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-Mozilla和IE中的一个函数直接量的问题分析
Aug 12 Javascript
在IE下获取object(ActiveX)的Param的代码
Sep 15 Javascript
javascript实现的像java、c#之类的sleep暂停的函数代码
Mar 04 Javascript
jquery常用技巧及常用方法列表集合
Apr 06 Javascript
jQuery实现类似淘宝购物车全选状态示例
Jun 26 Javascript
JavaScript调用后台的三种方法实例
Oct 17 Javascript
javascript实现通过表格绘制颜色填充矩形的方法
Apr 21 Javascript
js正则表达式验证表单【完整版】
Mar 06 Javascript
jQuery+Cookie实现切换皮肤功能【附源码下载】
Mar 25 jQuery
VUE中v-on:click事件中获取当前dom元素的代码
Aug 22 Javascript
微信小程序云开发之模拟后台增删改查
May 16 Javascript
Java无向树分析 实现最小高度树
Apr 09 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连接SQLServer2005 的问题解决方法
2010/07/19 PHP
PHP学习笔记之一
2011/01/17 PHP
php后退一页表单内容保存实现方法
2012/06/17 PHP
有道搜索和IP138的IP的API接口(PHP应用)
2012/11/29 PHP
php mail to 配置详解
2014/01/16 PHP
用javascript实现页面打印的三种方法
2007/03/05 Javascript
JSON 客户端和服务器端的格式转换
2009/08/27 Javascript
jQuery实现可拖动的浮动层完整代码
2013/05/27 Javascript
在浏览器中打开或关闭JavaScript的方法
2015/06/03 Javascript
JavaScript中的some()方法使用详解
2015/06/09 Javascript
javascript实现类似百度分享功能的方法
2015/07/27 Javascript
JavaScript实现给按钮加上双重动作的方法
2015/08/14 Javascript
JavaScript实现跑马灯抽奖活动实例代码解析与优化(一)
2016/02/16 Javascript
layui当点击文本框时弹出选择框,显示选择内容的例子
2019/09/02 Javascript
基于better-scroll 实现歌词联动功能的代码
2020/05/07 Javascript
[45:14]Optic vs VP 2018国际邀请赛淘汰赛BO3 第二场 8.24
2018/08/25 DOTA
python写xml文件的操作实例
2014/10/05 Python
Python下实现的RSA加密/解密及签名/验证功能示例
2017/07/17 Python
python matlibplot绘制多条曲线图
2021/02/19 Python
python opencv 读取图片 返回图片某像素点的b,g,r值的实现方法
2019/07/03 Python
Python实现微信翻译机器人的方法
2019/08/13 Python
PyCharm下载和安装详细步骤
2019/12/17 Python
python读取csv文件指定行的2种方法详解
2020/02/13 Python
python 成功引入包但无法正常调用的解决
2020/03/09 Python
sklearn线性逻辑回归和非线性逻辑回归的实现
2020/06/09 Python
35款精致的 CSS3 和 HTML5 网页模板 推荐
2012/08/03 HTML / CSS
html5指南-6.如何创建离线web应用程序实现离线访问
2013/01/07 HTML / CSS
酒店副总经理岗位职责范本
2014/02/04 职场文书
《槐乡五月》教学反思
2014/04/25 职场文书
师德演讲稿范文
2014/05/06 职场文书
先进个人自荐书
2015/03/06 职场文书
刑事起诉书范文
2015/05/19 职场文书
昆虫记读书笔记
2015/06/26 职场文书
运动会闭幕式通讯稿
2015/07/18 职场文书
详解如何使用Node.js实现热重载页面
2021/05/06 Javascript
美元符号 $
2022/02/17 杂记