JavaScript的mouse实践应用之跟随鼠标实时移动的提示框（选项卡）
本文章要实现的就是下图所示效果，蓝色涂抹区域就是鼠标所在位置，图中的介绍信息提示框会跟随鼠标移动
那么先来梳理一下思路，首先我们需要用到的事件有onmouseover‘（鼠标移入/经过）当鼠标经过的时候要触发提示框的显示效果，onmouseout（鼠标移出）鼠标离开a链接区域的时候要隐藏提示框，onmousemove（鼠标移动）当鼠标在a链接范围内移动时，提示框要跟随着鼠标一起移动
那么如何实现对提示框的定位效果那？今天就用e.pageX和e.pageY来实现这个效果（e表示事件），如果上述事件或者属性你不认识，建议先去百度一下
emmmm，我的习惯就是先po出来html标签元素的代码，然后css样式最后JavaScript代码哦
Html标签元素如下：
<body>
<a href="#">唐太宗</a>
<a href="#">武则天 </a>
<a href="#">李治</a>
<a href="#">李弘</a>
<div id="msg"></div> //这时候你可能疑惑msg里面怎么没有信息，对就是没有信息，我们要通过JavaScript对信息进行遍历添加，减少代码量，提升质量
</body>
Css样式如下（关键样式我会备注，不关键的可以自己随意设置）
<style>
a{
margin: 0 100px;
font-size: 36px;
}
#msg{
color: white;
height: 100px;
width: 500px;
background: rgba(0, 0, 0, 0.5);
position: absolute; //这个不能少，而且当前msg所对应的div标签没有拥有定位属性的父元素，所以基于html页面
display: none; //默认msg为不显示
}
</style>
Script代码如下
<script>
var arr = ["李世民（598年1月28日或599年1月23日—649年7月10日），陇西狄道（今甘肃省临洮县）人。唐朝第二位皇帝（626—649年在位），政治家、战略家、军事家、诗人。",
"武则天 武曌[zhào] [1] （624年－705年12月16日 [2] ），即武则天，并州文水（今山西文水）人。唐朝至武周时期政治家，武周开国君主（690年－705年在位），也是中国历史上唯一的正统女皇帝、即位年龄最大（67岁）及寿命最长的皇帝之一（82岁）。",
"李治 ，唐高宗李治（628年7月21日 [1-2] -683年12月27日 [3] ），字为善，唐朝第三位皇帝（649年7月15日-683年12月27日在位），唐太宗李世民第九子，母为文德顺圣皇后长孙氏，太子李承乾、魏王李泰同母弟。",
"李弘（653~675年），陇西成纪（今甘肃省秦安县）人。 [1] 唐高宗李治第五子，一代女皇武则天长子，唐朝第一位死后追封皇帝的太子。"];
//定义一个arr来存放提示信息，每一个提示信息都是一个数组元素，使用for循环动态添加
window.onload = function (){
var oMsg = document.getElementById("msg"); //使用id来获取msg对应的div元素，返回一个对象
var aAs = document.getElementsByTagName("a"); //使用tagname来获取页面上所有的a元素，返回一个数组
for (let i = 0; i < aAs.length; i++) { //使用for循环动态给a链接添加三个鼠标事件
aAs[i].onmouseover = function(){
oMsg.style.display = "block"; //鼠标经过状态为显示
oMsg.innerHTML = arr[i]; //给msg提示框填充信息
}
aAs[i].onmouseout = function(){
oMsg.style.display = "none"; //鼠标离开状态为隐藏
}
aAs[i].onmousemove = function(ev){ //要使用鼠标事件对象的属性，首先要有一个鼠标对象，系统会自动获取鼠标对象并且传入，定义一个形参来接收即可
var e = ev || window.event; //IE8以下不兼容鼠标对象，但支持window.event，所以要避免这种情况的话就使用“||”事件的短路操作，给变量e赋成一个鼠标对象
oMsg.style.left = e.pageX + 5 + "px"; //e.clientX是基于Html页面的左上角为原点，返回X轴对应的像素，返回类型为number，所以要拼接一个"px"来赋一个单位
//至于加这个5是干嘛的？其实也很好理解，你把5去掉试试，是不是显示就有点不太正常，因为在鼠标移动的时候msg的层级属于定位元素，所以比a链接的层级要高，所以你鼠标一移动，鼠标就会在msg元素上而不在a元素上，但我们给a元素设置如果鼠标不在a元素上就要把msg元素给隐藏，所以就这样造成msg显示不正常的情况，这时我们要给msg的定位加上几个像素值进行定位偏离，这样提示框不仅可以跟随鼠标实时移动而且显示也没有问题了
oMsg.style.top = e.pageY + 5 + "px";
}
}
}
</script>
