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用noConflict代替$的实现方法
Apr 12 jQuery
jQuery鼠标移动图片上实现放大效果
Jun 25 jQuery
认识jQuery的Promise的具体使用方法
Oct 10 jQuery
Django中使用jquery的ajax进行数据交互的实例代码
Oct 15 jQuery
基于jquery.page.js实现分页效果
Jan 01 jQuery
Vue引入jquery实现平滑滚动到指定位置
May 09 jQuery
jQuery.validate.js表单验证插件的使用代码详解
Oct 22 jQuery
详解jQuery设置内容和属性
Apr 11 jQuery
JQuery实现ul中添加LI和删除指定的Li元素功能完整示例
Oct 16 jQuery
jQuery利用cookie 实现本地收藏功能(不重复无需多次命名)
Nov 07 jQuery
jquery实现有过渡效果的tab切换
Jul 17 jQuery
jQuery编写QQ简易聊天框
Aug 27 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出现web系统多域名登录失败的解决方法
2014/09/30 PHP
Windows下Apache + PHP SESSION丢失的解决过程全纪录
2015/04/07 PHP
JS是否可以跨文件同时控制多个iframe页面的应用技巧
2007/12/16 Javascript
JQuery DataTable删除行后的页面更新利用Ajax解决
2013/05/17 Javascript
分享9点个人认为比较重要的javascript 编程技巧
2015/04/27 Javascript
JavaScript实现带标题的图片轮播特效
2015/05/20 Javascript
快速掌握Node.js事件驱动模型
2016/03/21 Javascript
js事件处理程序跨浏览器解决方案
2016/03/27 Javascript
nodejs加密Crypto的实例代码
2016/07/07 NodeJs
javascript九宫格图片随机打乱位置的实现方法
2017/03/15 Javascript
js es6系列教程 - 基于new.target属性与es5改造es6的类语法
2017/09/02 Javascript
angularjs实现简单的购物车功能
2017/09/21 Javascript
angularjs实现时间轴效果的示例代码
2017/11/29 Javascript
jQuery中库的引用方法
2018/01/06 jQuery
详解微信小程序审核不通过的解决方法
2018/01/17 Javascript
详解angular2.x创建项目入门指令
2018/10/11 Javascript
详解vue移动端项目代码拆分记录
2019/03/15 Javascript
2020淘宝618理想生活列车自动领喵币js脚本的代码
2020/06/02 Javascript
js实现验证码功能
2020/07/24 Javascript
Python实现文件按照日期命名的方法
2015/07/09 Python
python实现输入数字的连续加减方法
2018/06/22 Python
解决pycharm remote deployment 配置的问题
2019/06/27 Python
使用HTML5 Canvas绘制直线或折线等线条的方法讲解
2016/03/14 HTML / CSS
尤妮佳moony海外旗舰店:日本殿堂级纸尿裤品牌
2018/02/23 全球购物
澳大利亚领先的折扣药房:Chemist Direct(有中文站)
2018/11/24 全球购物
乌克兰设计师和品牌的服装:Love&Live
2020/04/14 全球购物
采购主管工作职责
2013/12/12 职场文书
大学生村官典型材料
2014/01/12 职场文书
幼儿园评语大全
2014/04/17 职场文书
对教师的评语
2014/04/28 职场文书
组织生活会表态发言材料
2014/10/17 职场文书
2014年煤矿工作总结
2014/11/24 职场文书
大学生党员自我评价
2015/03/04 职场文书
电力安全教育培训心得体会
2016/01/11 职场文书
2016先进工作者事迹材料
2016/02/25 职场文书
Pytorch 统计模型参数量的操作 param.numel()
2021/05/13 Python