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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • jQuery实现鼠标放置名字上显示详细内容气泡提示框效果的方法分析

    本文实例讲述了jQuery实现鼠标放置名字上显示详细内容气泡提示框效果的方法.分享给大家供大家参考,具体如下: 实现效果如上图,当鼠标放置到名字上时,则显示出内容详情. 实现具体过程如下: 1.需要加这句js <!--实现鼠标放置名字上显示气泡说明的js--> <script> $(function () { $('[data-toggle="popover"]').popover() }); </script> 2.html代码如下: <td

  • jquery实现鼠标滑过显示提示框的方法

    jquery实现鼠标滑过显示提示框的方法

    本文实例讲述了jquery实现鼠标滑过显示提示框的方法.分享给大家供大家参考.具体如下: 一.jquery鼠标滑过显示提示框实例 1.效果图 2.实现代码 ( 需要自行添加  jquery.js.按钮图片.提示框图片  ) HTML 代码 复制代码 代码如下: <!DOCTYPE> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF

  • Jquery实现鼠标移上弹出提示框、移出消失思路及代码

    思路: 1.首先要定位实现这种效果的元素 ,本次通过class 2.如果是动态显示不同的提示内容,需设置title 3.通过JQ给定位到元素加上 mouseover 和mouseout 事件 4.再完善下,弹出框跟随鼠标在目标元素上移动 5.再把 mouseover .mouseout 合并成 hover 复制代码 代码如下: //页面加载完成 $(function () {     var x = 10;     var y = 20; //设置提示框相对于偏移位置,防止遮挡鼠标     $(

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

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

    jquery鼠标悬浮弹出气泡提示框,供大家参考,具体内容如下 居中的图片 代码 我在网上找了很多例子都是单独的一个,所以我修改了jquery的一点代码,让它可以在一个页面上多次使用,原文的地址我没找到,相信我这个会更好一点. //别忘了导入js文件! <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>气泡显示</title> <script

  • jQuery实现鼠标经过弹出提示信息的地图热点效果

    jQuery实现鼠标经过弹出提示信息的地图热点效果

    本文实例讲述了jQuery实现鼠标经过弹出提示信息的地图热点效果.分享给大家供大家参考.具体如下: 这里的jQuery鼠标经过弹出提示信息地图热点效果,很多网站上有用到,送给大家,对作者表示感谢. 运行效果截图如下: 具体代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html&

  • jquery制作漂亮的弹出层提示消息特效

    jquery制作漂亮的弹出层提示消息特效

    今天给大家带来一款基于jquery超炫的弹出层提示消息.这款实例页面初始时,一个go按钮.当单击go按钮时,提示强出层以动画形式出现.效果图如下: 实现的代码. html代码: 复制代码 代码如下: <div class='b'>     </div>     <div class='bb'>     </div>     <button id='go'>         GO     </button>     <div cl

  • JS+CSS实现鼠标经过弹出一个DIV框完整实例(带缓冲动画渐变效果)

    本文实例讲述了JS+CSS实现鼠标经过弹出一个DIV框效果.分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">

  • jQuery实现鼠标经过购物车出现下拉框代码(推荐)

    这一段时间在学习web前端,最近学了jQuery库,深感其强大,下面通过写购物车的下拉框做法,把自己的理解和大家交流一下,欢迎各位大神指点指正,废话不多说,开始正题: 购物车html: <!-- 购物车 start --> <div class="shopping" id="shopping-box"> <a href="" id="shoptext"><i class="i

  • 关于使用pyqt弹出消息提示框的问题

    关于使用pyqt弹出消息提示框的问题

    目录 安装 pyqt 安装遇到问题 还有 To avoid this problem you can invoke Python with '-m pip' instead of running pip directly. 问题 Ubuntu 默认使用 Python2 更换默认配置为 Python3 测试验证 创建一个基本的GUI应用 各种样式的消息对话框示例 Python 程序打包 安装 pyinstaller 显示 command not found 总结 本文仅针对 Ubuntu 操作系统

  • 基于JavaScript实现鼠标悬浮弹出跟随鼠标移动的带箭头的信息层

    很多网站,当鼠标悬浮在一个元素上的时候能够弹出一个信息说明层,并且此层能够跟随鼠标移动,同时弹出的层带有箭头,此箭头指向鼠标悬浮的元素,下面就通过实例代码简单介绍一下如何实现此效果. 代码实例如下: <!DOCTYPE html> <html><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta nam

  • 基于Android6.0实现弹出Window提示框

    基于Android6.0实现弹出Window提示框

    在项目中经常会需要应用弹出一些自定义的窗口,这时候Android自带的系统Dialog就无法满足我们的需求了,为了满足项目需求,我们可以使用Window来满足这一需求. 首先我们新建一个项目,来到MainActivity的布局文件,在这里新建一个按钮用于弹出Window <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertica

  • PL/SQL Dev连接Oracle弹出空白提示框的解决方法分享

    PL/SQL Dev连接Oracle弹出空白提示框的解决方法分享

    没办法,只能自己研究,经过大概一天时间吧,还是搞好了,写个总结. 出现这种问题,解决方法大概有这几种: 1.权限不够,导致弹出空吧提示框.(直接上链接) http://jingyan.baidu.com/article/066074d6760959c3c21cb0d6.html 就PL/SQL图标上点右键---属性---兼容性--管理员身份运行此程序的勾打上,即可 2.环境变量没设对. ①在安装oracle服务器的机器上搜索下列文件,oci.dllocijdbc10.dll(其中10代表orac

  • 用PHP实现弹出消息提示框的两种方法

    方法一: 复制代码 代码如下: echo "<script>alert('提示内容')</script>"; 方法二: 复制代码 代码如下: echo '<script language="JavaScript">;alert("这是";location.href="index.htm";</script>;'; 里面的location.href="index.htm&

随机推荐