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 30 jQuery
jQuery获取table下某一行某一列的值实现代码
Apr 07 jQuery
jquery append与appendTo方法比较
May 24 jQuery
jquery实现一个全局计时器(商城可用)
Jun 30 jQuery
jQuery事件对象的属性和方法详解
Sep 09 jQuery
jQuery实现用户信息表格的添加和删除功能
Sep 12 jQuery
jquery实现左右轮播图效果
Sep 28 jQuery
webpack写jquery插件的环境配置
Dec 21 jQuery
jQuery中ajax请求后台返回json数据并渲染HTML的方法
Aug 08 jQuery
详解jQuery中的easyui
Sep 02 jQuery
使用jQuery动态设置单选框的选中效果
Dec 06 jQuery
jQuery实现移动端下拉展现新的内容回弹动画
Jun 24 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和ACCESS写聊天室(三)
2006/10/09 PHP
提高define性能的php扩展hidef的安装和使用
2011/06/14 PHP
基于MySQL到MongoDB简易对照表的详解
2013/06/03 PHP
php连接oracle数据库的核心步骤
2016/05/26 PHP
laravel框架中表单请求类型和CSRF防护实例分析
2019/11/23 PHP
禁止空格提交表单的js代码
2013/11/17 Javascript
js实现鼠标悬停图片上时滚动文字说明的方法
2015/02/17 Javascript
JavaScript jQuery 中定义数组与操作及jquery数组操作
2015/12/18 Javascript
js获取url传值的方法
2015/12/18 Javascript
javascript HTML5 canvas实现打砖块游戏
2020/06/18 Javascript
Node.js微信 access_token ( jsapi_ticket ) 存取与刷新的示例
2017/09/30 Javascript
关于Vue在ie10下空白页的debug小结
2018/05/02 Javascript
详解VueJs中的V-bind指令
2018/05/03 Javascript
node前端模板引擎Jade之标签的基本写法
2018/05/11 Javascript
微信小程序导航栏跟随滑动效果的实现代码
2019/05/14 Javascript
[07:26]2015国际邀请赛第二日TOP10集锦
2015/08/06 DOTA
关于Python数据结构中字典的心得
2017/12/04 Python
tensorflow 自定义损失函数示例代码
2020/02/05 Python
Python importlib动态导入模块实现代码
2020/04/16 Python
浅谈Python3多线程之间的执行顺序问题
2020/05/02 Python
基于PyQT实现区分左键双击和单击
2020/05/19 Python
Python SMTP发送电子邮件的示例
2020/09/23 Python
python进行二次方程式计算的实例讲解
2020/12/06 Python
意大利大型购物中心:Oliviero.it
2017/10/19 全球购物
屈臣氏马来西亚官网:Watsons马来西亚
2019/06/15 全球购物
美国在线艺术商店:HandmadePiece
2020/11/06 全球购物
财务会计专业毕业生自荐信
2013/10/19 职场文书
护士的自我鉴定
2014/02/07 职场文书
《望洞庭》教学反思
2014/02/16 职场文书
三严三实民主生活会发言稿
2014/10/13 职场文书
2014年优秀党员材料
2014/12/18 职场文书
公司仓管员岗位职责
2015/04/01 职场文书
消防安全月活动总结
2015/05/08 职场文书
百万英镑观后感
2015/06/09 职场文书
Python如何把不同类型数据的json序列化
2021/04/30 Python
Java8中接口的新特性使用指南
2021/11/01 Java/Android