脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → javascript鼠标移到Image上方时显示文字效果

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

 更新时间：2015年08月07日 14:55:04   作者：皮蛋  
这篇文章主要介绍了javascript实现鼠标移到Image上方时显示文字效果的方法,涉及javascript鼠标事件及图文属性动态设置的相关技巧,可用于为图片增加文字提示效果,需要的朋友可以参考下

本文实例讲述了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程序设计有所帮助。

您可能感兴趣的文章:

相关文章

  • 微信小程序实现电影App导航和轮播

    微信小程序实现电影App导航和轮播

    这篇文章主要为大家详细介绍了微信小程序实现电影App导航和轮播，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2020-11-11
  • 详解JS面向对象编程

    详解JS面向对象编程

    这篇文章主要为大家介绍了js面向对象编程，感兴趣的小伙伴们可以参考一下
    2016-01-01
  • typescript环境安装并开启VSCode自动监视编译ts文件为js文件

    typescript环境安装并开启VSCode自动监视编译ts文件为js文件

    这篇文章主要介绍了安装typescript环境并开启VSCode自动监视编译ts文件为js文件,本文教大家最基础的安装和配置自动监视ts文件编译成js文件，需要的朋友可以参考下
    2022-06-06
  • 如何在JavaScript中实现私有属性的写类方式(二)

    如何在JavaScript中实现私有属性的写类方式(二)

    这篇文章主要介绍了如何在JavaScript中实现私有属性的写类方式。需要的朋友可以过来参考下，希望对大家有所帮助
    2013-12-12
  • 基于HTML+JavaScript实现中国象棋

    基于HTML+JavaScript实现中国象棋

    这篇文章主要为大家详细介绍了如何利用HTML+CSS+JS实现中国象棋游戏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2022-08-08
  • JS删除数组元素的函数介绍

    JS删除数组元素的函数介绍

    有时候我们需要数组元素的值，那么就可以参考下面的方法，文中提到了不少这方面的资料，数组去重功能等
    2013-03-03
  • uniapp如何手动实现让input文本框聚焦效果

    uniapp如何手动实现让input文本框聚焦效果

    最近使用uniapp做一个评论的功能,遇到一个需求就是点击上面的评论图标,让定位在底部的input框聚焦,下面这篇文章主要给大家介绍了关于uniapp如何手动实现让input文本框聚焦效果的相关资料,需要的朋友可以参考下
    2023-12-12
  • js实现手机web图片左右滑动效果

    js实现手机web图片左右滑动效果

    这篇文章主要为大家详细介绍了js实现手机web图片左右滑动效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-12-12
  • 使用javascript过滤html的字符串(注释标记法)

    使用javascript过滤html的字符串(注释标记法)

    本篇文章是对使用javascript过滤html的字符串进行了详细的分析介绍，需要的朋友参考下
    2013-07-07
  • JS中的async与await怎么使用

    JS中的async与await怎么使用

    这篇文章主要介绍了JS的async/await怎么使用,简单来说，async/await是基于promises的语法糖，使异步代码更易于编写和阅读,下面来看详细的介绍内容吧。需要的小伙伴也可以参考一下
    2021-12-12

最新评论