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 相关文章推荐
javascript算法题 求任意一个1-9位不重复的N位数在该组合中的大小排列序号
Jul 21 Javascript
jquery eval解析JSON中的注意点介绍
Aug 23 Javascript
js下拉选择框与输入框联动实现添加选中值到输入框的方法
Aug 17 Javascript
JavaScript通过HTML的class来获取HTML元素的方法总结
May 24 Javascript
Bootstrap自定义文件上传下载样式
May 26 Javascript
详解Bootstrap的iCheck插件checkbox和radio
Aug 24 Javascript
ES6新特征数字、数组、字符串
Oct 01 Javascript
Vue.js教程之计算属性
Nov 11 Javascript
jQuery实现扑克正反面翻牌效果
Mar 10 Javascript
Angular实现类似博客评论的递归显示及获取回复评论的数据
Nov 06 Javascript
ant design vue中日期选择框混合时间选择器的用法说明
Oct 27 Javascript
JavaScript实现原型封装轮播图
Dec 27 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
无法载入 mcrypt 扩展,请检查 PHP 配置终极解决方案
2011/07/18 PHP
改写函数实现PHP二维/三维数组转字符串
2013/09/13 PHP
setTimeout与setInterval在不同浏览器下的差异
2010/01/24 Javascript
基于jQuery的获得各种控件Value的方法
2010/11/19 Javascript
javascript克隆对象深度介绍
2012/11/20 Javascript
js css后面所带参数含义介绍
2013/08/18 Javascript
js怎么判断flash swf文件是否加载完毕
2014/08/14 Javascript
推荐一个封装好的getElementsByClassName方法
2014/12/02 Javascript
js+html5通过canvas指定开始和结束点绘制线条的方法
2015/06/05 Javascript
Javascript中Date类型和Math类型详解
2016/02/27 Javascript
video.js使用改变ui过程
2017/03/05 Javascript
详解Node.js串行化流程控制
2017/05/04 Javascript
jquery获取元素到屏幕四周可视距离的方法
2018/09/05 jQuery
使用vue-cli3新建一个项目并写好基本配置(推荐)
2019/04/24 Javascript
如何自定义微信小程序tabbar上边框的颜色
2019/07/09 Javascript
JS扁平化输出数组的2种方法解析
2019/09/17 Javascript
微信小程序中插入激励视频广告并获取收益(实例代码)
2019/12/06 Javascript
Bootstrap告警框(alert)实现弹出效果和短暂显示后上浮消失的示例代码
2020/08/27 Javascript
python处理json数据中的中文
2014/03/06 Python
Python中logging模块的用法实例
2014/09/29 Python
Python基于sftp及rsa密匙实现远程拷贝文件的方法
2016/09/21 Python
使用python实现tcp自动重连
2017/07/02 Python
windows下python之mysqldb模块安装方法
2017/09/07 Python
浅谈Pandas中map, applymap and apply的区别
2018/04/10 Python
Python3列表List入门知识附实例
2020/02/09 Python
解决python3.6用cx_Oracle库连接Oracle的问题
2020/12/07 Python
详解Python调用系统命令的六种方法
2021/01/28 Python
Pytorch模型迁移和迁移学习,导入部分模型参数的操作
2021/03/03 Python
城市轨道交通工程职业规划书范文
2014/01/18 职场文书
幼儿园教师的考核评语
2014/04/18 职场文书
2015年毕业生自我鉴定模板
2014/09/19 职场文书
大学生毕业个人总结
2015/02/15 职场文书
2015年银行柜员工作总结报告
2015/04/01 职场文书
离婚起诉书范本
2015/05/18 职场文书
2015年新农村建设工作总结
2015/05/22 职场文书
使用react+redux实现计数器功能及遇到问题
2021/06/02 Javascript