jquery实现鼠标悬浮弹出气泡提示框


Posted in jQuery onDecember 23, 2020

jquery鼠标悬浮弹出气泡提示框,供大家参考,具体内容如下

居中的图片

jquery实现鼠标悬浮弹出气泡提示框

代码

我在网上找了很多例子都是单独的一个,所以我修改了jquery的一点代码,让它可以在一个页面上多次使用,原文的地址我没找到,相信我这个会更好一点。

//别忘了导入js文件!

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <title>气泡显示</title>
 <script type="text/javascript" src="../js/jquery-1.8.3.js" ></script>
 <style type="text/css">
  .container {
   margin-top: 130px;
  }
  .tip {
   padding: 8px 12px;
   width: 140px;
   display: block;
   font-size: 16px;
   color: #fff;
   font-weight: bold;
   background: #ED5517;
   cursor: pointer;
   margin-left: 400px;
   align-content: center;
   margin-top: 20px;
   margin-bottom: 20px;
  }
  .content {
   position: absolute;
   display: none;
   padding: 10px;
   width: 160px;
   background: #e0edf7;
   border-radius: 6px;
  }

  .content::before {
   content: "";
   position: relative;
   top: -20px;
   left: 10px;
   width: 0;
   height: 0;
   display: block;
   border-left: 10px solid transparent;
   border-right: 10px solid transparent;
   border-bottom: 10px solid #e0edf7;
  }
 </style>
</head>
<body>
<div class="container">
 <span id="xsztip" class="tip">鼠标悬停显示气泡</span>
 <div class="content">
  <span>The quick fox jumps over a lazy dog.</span>
 </div>
 <span id="xsztip2" class="tip">鼠标悬停显示气泡</span>
 <div class="content">
  <span>The quick fox jumps over a lazy dog.</span>
 </div>
 <span id="xsztip3" class="tip">鼠标悬停显示气泡</span>
 <div class="content">
  <span>The quick fox jumps over a lazy dog.</span>
 </div>
</div>
<script type="text/javascript">
 $(function(){
  $("#xsztip").hover(function(){
   show_xszimg(this);
  },function(){
   hide_xszimg(this);
  });
  $("#xsztip2").hover(function(){
   show_xszimg(this);
  },function(){
   hide_xszimg(this);
  });
  $("#xsztip3").hover(function(){
   show_xszimg(this);
  },function(){
   hide_xszimg(this);
  });
  function hide_xszimg(f){
   $(f).next().hide()
  }
  function show_xszimg(f){
   var c=$(f);
   var e=c.offset();
   var a=e.left;
   var b=e.top+40;
   $(f).next().css({left:a+"px",top:b+"px"}).show();
  }
 });
</script>
</body>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

jQuery 相关文章推荐
jQuery实现简单的计时器功能实例分析
Aug 29 jQuery
jQuery响应滚动条事件功能示例
Oct 14 jQuery
jQuery实现碰到边缘反弹的动画效果
Feb 24 jQuery
基于jQuery实现的设置文本区域的光标位置
Jun 15 jQuery
jquery 通过ajax请求获取后台数据显示在表格上的方法
Aug 08 jQuery
jQuery中ajax请求后台返回json数据并渲染HTML的方法
Aug 08 jQuery
jQuery简单实现根据日期计算星期几的方法
Jan 09 jQuery
jQuery实现合并表格单元格中相同行操作示例
Jan 28 jQuery
JS拖动选择table里的单元格完整实例【基于jQuery】
May 28 jQuery
JavaScript自动生成 年月范围 选择功能完整示例【基于jQuery插件】
Sep 03 jQuery
jQuery实现轮播图源码
Oct 23 jQuery
jQuery 判断元素是否存在然后按需加载内容的实现代码
Jan 16 jQuery
jquery实现图片放大镜效果
Dec 23 #jQuery
jQuery实现增删改查
Dec 22 #jQuery
jQuery实现本地存储
Dec 22 #jQuery
jQuery实现电梯导航模块
Dec 22 #jQuery
jQuery实现tab栏切换效果
Dec 22 #jQuery
jQuery+ajax实现文件上传功能
Dec 22 #jQuery
jQuery实现动态向上滚动
Dec 21 #jQuery
You might like
利用谷歌 Translate API制作自己的翻译脚本
2014/06/04 PHP
初窥JQuery-Jquery简介 入门了解篇
2010/11/25 Javascript
在子窗口中关闭父窗口的一句代码
2013/10/21 Javascript
Javascript异步编程模型Promise模式详细介绍
2014/05/08 Javascript
jquery.cookie.js用法实例详解
2015/12/25 Javascript
第一章之初识Bootstrap
2016/04/25 Javascript
Angular外部使用js调用Angular控制器中的函数方法或变量用法示例
2016/08/05 Javascript
Bootstrap CSS布局之列表
2016/12/15 Javascript
微信小程序 登陆流程详细介绍
2017/01/17 Javascript
JS实现线性表的顺序表示方法示例【经典数据结构】
2017/04/11 Javascript
angular2中使用第三方js库的实例
2018/02/26 Javascript
vue中实现移动端的scroll滚动方法
2018/03/03 Javascript
vue和webpack项目构建过程常用的npm命令详解
2018/06/15 Javascript
axios如何利用promise无痛刷新token的实现方法
2019/08/27 Javascript
基于Element封装一个表格组件tableList的使用方法
2020/06/29 Javascript
详解vue3.0 diff算法的使用(超详细)
2020/07/01 Javascript
在react项目中使用antd的form组件,动态设置input框的值
2020/10/24 Javascript
原生js实现无缝轮播图效果
2021/01/28 Javascript
教你如何将 Sublime 3 打造成 Python/Django IDE开发利器
2014/07/04 Python
Python的Flask框架中实现简单的登录功能的教程
2015/04/20 Python
轻松理解Python 中的 descriptor
2017/09/15 Python
利用numpy和pandas处理csv文件中的时间方法
2018/04/19 Python
python实现音乐播放器 python实现花框音乐盒子
2020/02/25 Python
解决numpy矩阵相减出现的负值自动转正值的问题
2020/06/03 Python
Python手动或自动协程操作方法解析
2020/06/22 Python
Canvas 文字碰撞检测并抽稀的方法
2019/05/27 HTML / CSS
美国网上鞋城:Shoeline.com
2016/11/17 全球购物
ALDI奥乐齐官方海外旗舰店:德国百年超市
2017/12/27 全球购物
数据库什么时候应该被重组
2012/11/02 面试题
EJB包括(SessionBean,EntityBean)说出他们的生命周期,及如何管理事务的?
2013/02/17 面试题
材料加工工程求职信
2014/02/19 职场文书
毕业留言寄语大全
2014/04/10 职场文书
活动倡议书范文
2014/05/13 职场文书
身边的榜样活动方案
2014/08/20 职场文书
大学生见习报告总结
2014/11/04 职场文书
教师师德表现自我评价
2015/03/05 职场文书