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 相关文章推荐
JS/jquery实现一个网页内同时调用多个倒计时的方法
Apr 27 jQuery
JS jQuery使用正则表达式去空字符的简单实现代码
May 20 jQuery
jQuery插件DataTables分页开发心得体会
Aug 22 jQuery
jQuery中.attr()和.data()的区别分析
Sep 03 jQuery
基于jQuery选择器之表单对象属性筛选选择器的实例
Sep 19 jQuery
jQuery使用bind函数实现绑定多个事件的方法
Oct 11 jQuery
vue-cli 引入jQuery,Bootstrap,popper的方法
Sep 03 jQuery
为jquery的ajax请求添加超时timeout时间的操作方法
Sep 04 jQuery
jQuery实现模拟搜索引擎的智能提示功能简单示例
Jan 27 jQuery
Vue CLI3.0中使用jQuery和Bootstrap的方法
Feb 28 jQuery
jquery+css3实现的经典弹出层效果示例
May 16 jQuery
基于JQuery和DWR实现异步数据传递
Oct 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
PHP 数组教程 定义数组
2009/10/23 PHP
PHP中isset与array_key_exists的区别实例分析
2015/06/02 PHP
PHP性能优化大全(php.ini)
2016/05/20 PHP
php 多继承的几种常见实现方法示例
2019/11/18 PHP
JavaScript 对象、函数和继承
2009/07/07 Javascript
javascript权威指南 学习笔记之变量作用域分享
2011/09/28 Javascript
jQuery 菜单随滚条改为以定位方式(固定要浏览器顶部)
2012/05/24 Javascript
jQuery操作select的实例代码
2012/06/14 Javascript
javascript设置和获取cookie的方法实例详解
2016/01/05 Javascript
Javascript的表单验证-初识正则表达式
2016/03/18 Javascript
30分钟快速掌握Bootstrap框架
2016/05/24 Javascript
jQuery的deferred对象使用详解
2016/09/25 Javascript
JSON与String互转的实现方法(Javascript)
2016/09/27 Javascript
bootstrap模态框垂直居中效果
2016/12/03 Javascript
原生js编写基于面向对象的分页组件
2016/12/05 Javascript
Node.js 利用cheerio制作简单的网页爬虫示例
2018/03/01 Javascript
Angular中使用ng-zorro图标库部分图标不能正常显示问题
2019/04/22 Javascript
Nodejs监听日志文件的变化的过程解析
2019/08/04 NodeJs
Vue实现商品飞入购物车效果(电商项目)
2019/11/26 Javascript
Vuex的各个模块封装的实现
2020/06/05 Javascript
在类Unix系统上开始Python3编程入门
2015/08/20 Python
Python logging管理不同级别log打印和存储实例
2018/01/19 Python
python实现手机销售管理系统
2019/03/19 Python
基于Tensorflow批量数据的输入实现方式
2020/02/05 Python
Django ORM 查询表中某列字段值的方法
2020/04/30 Python
python如何建立全零数组
2020/07/19 Python
基于HTML5 WebGL的3D机房的示例
2018/03/16 HTML / CSS
Backcountry旗下的户外商品闪购网站:steep&cheap
2016/09/22 全球购物
瑞贝卡·泰勒官方网站:Rebecca Taylor
2016/09/24 全球购物
丝芙兰中国官方商城:SEPHORA中国
2018/01/10 全球购物
英国蜡烛、蜡烛配件和家居香氛购买网站:Yankee Candle
2018/12/12 全球购物
大学自我鉴定范文
2013/12/26 职场文书
群众路线剖析材料
2014/09/30 职场文书
公司授权委托书
2014/10/17 职场文书
jdbc使用PreparedStatement批量插入数据的方法
2021/04/27 MySQL
微信小程序纯CSS实现无限弹幕滚动效果
2022/09/23 HTML / CSS