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插件
Mar 29 jQuery
jQuery实现按比例缩放图片的方法
Apr 29 jQuery
JQuery 封装 Ajax 常用方法(推荐)
May 21 jQuery
jQuery为某个div加入行样式
Jun 09 jQuery
jQuery模拟爆炸倒计时功能实例代码
Aug 21 jQuery
使用vue与jquery实时监听用户输入状态的操作代码
Sep 19 jQuery
一个有意思的鼠标点击文字特效jquery代码
Sep 23 jQuery
浅谈jquery中ajax跨域提交的时候会有2次请求的问题
Nov 10 jQuery
jQuery+SpringMVC中的复选框选择与传值实例
Jan 08 jQuery
jquery的$().each和$.each的区别
Jan 18 jQuery
jQuery与原生JavaScript选择HTML元素集合用法对比分析
Nov 26 jQuery
jquery自定义组件实例详解
Dec 31 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
php页面缓存ob系列函数介绍
2012/10/18 PHP
php实现excel中rank函数功能的方法
2015/01/20 PHP
php防止CC攻击代码 php防止网页频繁刷新
2015/12/21 PHP
在Win2003(64位)中配置IIS6+PHP5.2.17+MySQL5.5的运行环境
2016/04/04 PHP
Kindeditor编辑器添加图片上传水印功能(php代码)
2017/08/03 PHP
ThinkPHP5.1表单令牌Token失效问题的解决
2019/03/22 PHP
js cookies 常见网页木马挂马代码 24小时只加载一次
2009/04/13 Javascript
Underscore.js 的模板功能介绍与应用
2012/12/24 Javascript
javascript中的循环语句for语句深入理解
2014/04/04 Javascript
$(&quot;&quot;).click与onclick的区别示例介绍
2014/09/25 Javascript
浅谈JavaScript中的作用域和闭包问题
2015/07/07 Javascript
详解JavaScript中的构造器Constructor模式
2016/01/14 Javascript
基于RequireJS和JQuery的模块化编程日常问题解析
2016/04/14 Javascript
原生JS实现匀速图片轮播动画
2016/10/18 Javascript
微信小程序 自定义Toast实例代码
2017/06/12 Javascript
p5.js入门教程之键盘交互
2018/03/19 Javascript
解决vue 单文件组件中样式加载问题
2019/04/24 Javascript
js简单的分页器插件代码实例
2019/09/11 Javascript
javascript实现前端分页功能
2020/11/26 Javascript
[03:59]DOTA2英雄梦之声_第07期_水晶室女
2014/06/23 DOTA
[03:22]DAC最前线(第二期)—DOTA2亚洲邀请赛主赛场周边及线路探访
2015/01/24 DOTA
python中实现字符串翻转的方法
2018/07/11 Python
对python中的 os.mkdir和os.mkdirs详解
2018/10/16 Python
Python 根据日志级别打印不同颜色的日志的方法示例
2019/08/08 Python
利用python中集合的唯一性实现去重
2020/02/11 Python
150行Python代码实现带界面的数独游戏
2020/04/04 Python
基于python实现查询ip地址来源
2020/06/02 Python
使用css3匹配手机屏幕横竖状态
2014/01/27 HTML / CSS
世界上最大的在线旅行社新加坡网站:Expedia新加坡
2016/08/25 全球购物
static全局变量与普通的全局变量有什么区别
2014/05/27 面试题
送给程序员的20个Java集合面试问题
2014/08/06 面试题
小学绿色学校申报材料
2014/08/23 职场文书
银行求职信模板
2015/03/20 职场文书
举起手来观后感
2015/06/09 职场文书
无工作证明怎么写
2015/06/15 职场文书
vue 实现弹窗关闭后刷新效果
2022/04/08 Vue.js