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 相关文章推荐
利用JQuery+EasyDrag 实现弹出可拖动的Div,同时向Div传值,然后返回Div选中的值
Oct 24 Javascript
jQuery动态添加、删除元素的方法
Jan 09 Javascript
jQuery.extend()、jQuery.fn.extend()扩展方法示例详解
May 08 Javascript
JavaScript实现鼠标滑过处生成气泡的方法
May 16 Javascript
javascript原型模式用法实例详解
Jun 04 Javascript
javascript中使用new与不使用实例化对象的区别
Jun 22 Javascript
javascript中活灵活现的Array对象详解
Nov 30 Javascript
js返回顶部实例分享
Dec 21 Javascript
webpack踩坑之路图片的路径与打包
Sep 05 Javascript
JS拖拽排序插件Sortable.js用法实例分析
Feb 20 Javascript
Vue-input框checkbox强制刷新问题
Apr 18 Javascript
JavaScript架构localStorage特殊场景下二次封装操作
Jun 21 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仿盗链代码
2012/06/03 PHP
PHP调用VC编写的COM组件实例
2014/03/29 PHP
Js基础学习资料
2010/11/23 Javascript
使用Json比用string返回数据更友好,也更面向对象一些
2011/09/13 Javascript
表单验证的完整应用案例探讨
2013/03/29 Javascript
js语法学习之判断一个对象是否为数组
2014/05/13 Javascript
Node.js的特点和应用场景介绍
2014/11/04 Javascript
JavaScript中使用concat()方法拼接字符串的教程
2015/06/06 Javascript
jQuery图片轮播滚动切换代码分享
2020/04/20 Javascript
JS简单编号生成器实现方法(附demo源码下载)
2016/04/05 Javascript
js addDqmForPP给标签内属性值加上双引号的函数
2016/12/24 Javascript
JavaScript三种绑定事件方式及相互之间的区别分析
2017/01/10 Javascript
JS实现点击复选框变更DIV显示状态的示例代码
2017/12/18 Javascript
jQuery简单实现向列表动态添加新元素的方法示例
2017/12/25 jQuery
jquery.param()实现数组或对象的序列化方法
2018/10/08 jQuery
微信小程序swiper实现滑动放大缩小效果
2018/11/15 Javascript
详解Vue调用手机相机和相册以及上传
2019/05/05 Javascript
vue组件三大核心概念图文详解
2019/05/30 Javascript
Vue编写可显示周和月模式的日历 Vue自定义日历内容的显示
2019/06/26 Javascript
微信小程序wx.request拦截器使用详解
2019/07/09 Javascript
vue实现直播间点赞飘心效果的示例代码
2019/09/20 Javascript
js实现九宫格布局效果
2020/05/28 Javascript
Vue在H5 项目中使用融云进行实时个人单聊通讯
2020/12/14 Vue.js
pytorch掉坑记录:model.eval的作用说明
2020/06/23 Python
HTML5之SVG 2D入门7—SVG元素的重用与引用
2013/01/30 HTML / CSS
新加坡领先的时尚生活方式零售品牌:CHARLES & KEITH
2018/01/16 全球购物
美津浓巴西官方网站:Mizuno巴西
2019/07/24 全球购物
天鹅的故事教学反思
2014/02/04 职场文书
学校评语大全
2014/05/06 职场文书
俄语专业毕业生求职信
2014/07/12 职场文书
2015年财务人员工作总结
2015/04/10 职场文书
员工保密协议范本,您一定得收藏!很有用!
2019/08/08 职场文书
解决Golang中goroutine执行速度的问题
2021/05/02 Golang
MySQL中IF()、IFNULL()、NULLIF()、ISNULL()函数的使用详解
2021/06/26 MySQL
10大幻兽系恶魔果实 蝙蝠果实上榜,第一自愈能力强
2022/03/18 日漫
关于Python使用turtle库画任意图的问题
2022/04/01 Python