JS实现提示框跟随鼠标移动


Posted in Javascript onAugust 27, 2019

分享实例代码:

<!DOCTYPE html>
<html lang="en">
<head>

  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    *{
      padding: 0;
      margin: 0;
    }
    .box{width:500px;margin: 300px auto;border: solid 1px black;position: relative;}
    .title{}
    .title h2{background-color: #ccc;padding: 10px 0; border: 1px solid #000;
      /*position: relative;*/
      /*z-index: 2;*/
      margin-bottom: 30px;}
    .cont p{width:200px;background: #eee;margin: 0;display: none;position: absolute;left: 0;top:0;
      /*z-index: 6;*/
     }

  </style>
</head>
<body>
<div class="box">
  <div class="title">
    <h2>二级标题二级标题二级标题1111</h2>
    <h2>二级标题二级标题二级标题2222</h2>
  </div>
  <div class="cont">
    <p>第一个新闻内容第一个新闻内容第一个新闻内容第一个新闻内容第一个新闻内容第一个新闻内容第一个新闻内容第一个新闻内容第一个新闻内容第一个新闻内容第一个新闻内容第一个新闻内容第一个新闻内容</p>
    <p>第二个新闻内容第二个新闻内容第二个新闻内容第二个新闻内容第二个新闻内容第二个新闻内容第二个新闻内容第二个新闻内容第二个新闻内容第二个新闻内容第二个新闻内容第二个新闻内容第二个新闻内容第二个新闻内容</p>
  </div>
</div>
</body>
<script>
var aH=document.querySelectorAll(".title h2");
var aP=document.querySelectorAll(".cont p");
  for(var i=0;i<aH.length;i++){//先遍历元素
    aH[i].index=i; //编号
    aH[i].onmouseover=function () {//移进来显示
      aP[this.index].style.display="block";

    }
    aH[i].onmouseout=function () {//移出去消失
      aP[this.index].style.display="none"
    }
    aH[i].onmousemove=function (eve) { //使p跟着鼠标走
      var e=eve||window.event
      aP[this.index].style.left=e.offsetX+5+"px";
     
      aP[this.index].style.top=e.offsetY+5+
        this.offsetTop+"px"; // 因为p的定位相对于大框,offset的坐标相对于事件源,不够,需要加上事件源相对于大框的left和top;+5是为了让p和h错开,这样p就不会一直闪烁了。
    }
  }
</script>
</html>

效果图片:

JS实现提示框跟随鼠标移动

有兴趣的朋友们测试下,感谢大家对三水点靠木的支持。

Javascript 相关文章推荐
ie focus bug 解决方法
Sep 03 Javascript
JavaScript高级程序设计 阅读笔记(十三) js定义类或对象
Aug 14 Javascript
JavaScript中圆括号()和方括号[]的特殊用法疑问解答
Aug 06 Javascript
jquery插件开发之实现jquery手风琴功能分享
Mar 10 Javascript
Javascript中的异步编程规范Promises/A详细介绍
Jun 06 Javascript
js实现多选项切换导航菜单的方法
Feb 06 Javascript
Javascript中的数据类型之旅
Oct 18 Javascript
JavaScript实现复制内容到粘贴板代码
Mar 31 Javascript
jquery点击回车键实现登录效果并默认焦点的方法
Mar 09 jQuery
vue对storejs获取的数据进行处理时遇到的几种问题小结
Mar 20 Javascript
Vue引用Swiper4插件无法重写分页器样式的解决方法
Sep 27 Javascript
vue3.0中使用postcss-pxtorem的具体方法
Nov 20 Javascript
js对象数组和对象的使用实例详解
Aug 27 #Javascript
vue递归组件实战之简单树形控件实例代码
Aug 27 #Javascript
vue项目中引入Sass实例方法
Aug 27 #Javascript
package.json配置文件构成详解
Aug 27 #Javascript
axios如何利用promise无痛刷新token的实现方法
Aug 27 #Javascript
解决vue打包后刷新页面报错:Unexpected token
Aug 27 #Javascript
JS用最简单的方法实现四舍五入
Aug 27 #Javascript
You might like
第四节 构造函数和析构函数 [4]
2006/10/09 PHP
php操作mysqli(示例代码)
2013/10/28 PHP
php读取csc文件并输出
2015/05/21 PHP
Javascript Select操作大集合
2009/05/26 Javascript
屏蔽Flash右键信息的js代码
2010/01/17 Javascript
jQuery.validate 常用方法及需要注意的问题
2013/03/20 Javascript
js限制文本框只能输入整数或者带小数点的数字
2015/04/27 Javascript
javascript 使用正则test( )第一次是 true,第二次是false
2017/02/22 Javascript
重新理解JavaScript的六种继承方式
2017/03/24 Javascript
bootstrap table服务端实现分页效果
2017/08/10 Javascript
使用JS和canvas实现gif动图的停止和播放代码
2017/09/01 Javascript
获取本机IP地址的实例(JavaScript / Node.js)
2017/11/24 Javascript
基于Axios 常用的请求方法别名(详解)
2018/03/13 Javascript
layui 优化button按钮和弹出框的方法
2018/08/15 Javascript
JavaScript原型链与继承操作实例总结
2018/08/24 Javascript
JS实现在线ps功能详解
2019/07/31 Javascript
微信小程序自定义yPicker组件实现省市区三级联动功能
2020/10/29 Javascript
[00:29]2019完美世界全国高校联赛(秋季赛)总决赛海口落幕
2019/12/10 DOTA
python网络编程学习笔记(二):socket建立网络客户端
2014/06/09 Python
Python表示矩阵的方法分析
2017/05/26 Python
Python基于回溯法子集树模板实现图的遍历功能示例
2017/09/05 Python
wtfPython—Python中一组有趣微妙的代码【收藏】
2018/08/31 Python
便捷提取python导入包的属性方法
2018/10/15 Python
使用PIL(Python-Imaging)反转图像的颜色方法
2019/01/24 Python
windows上安装python3教程以及环境变量配置详解
2019/07/18 Python
Django 静态文件配置过程详解
2019/07/23 Python
OpenCV模板匹配matchTemplate的实现
2019/10/18 Python
详解CSS3的perspective属性设置3D变换距离的方法
2016/05/23 HTML / CSS
html5之Canvas路径绘图、坐标变换应用实例
2012/12/26 HTML / CSS
HTML5之SVG 2D入门13—svg对决canvas及长处和适用场景分析
2013/01/30 HTML / CSS
美国演唱会和体育门票购买网站:Ticketnetwork
2018/10/19 全球购物
高级编程求职信模板
2014/02/16 职场文书
经典洗发水广告词
2014/03/13 职场文书
小学校本教研总结
2015/08/13 职场文书
MySQL之DML语言
2021/04/05 MySQL
vue里使用create, mounted调用方法
2022/04/26 Vue.js