鼠标跟随案例：用js实现盒子跟随鼠标移动

需求：当我们鼠标放在div身上时，它的孩子p标签能够显示，而且跟着鼠标一起移动，

思路：

● 想让p标签跟着鼠标一起移动：运用鼠标移动事件，还需要p标签定位；（mousemove：鼠标移动事件）

● 定位以后，先隐藏p标签；当鼠标在div身上时才显示p标签（display：none；）

● 鼠标在div身上移入移出时，p标签显示和隐藏；（mouseover、mouseout：鼠标移入移出事件）

● p标签跟随鼠标移动，让鼠标所在位置距离鼠标所在对象div本身左上角位置，计算出offsetX和offsetY，因为p标签是绝对定位，而且有父盒子，所以它的定位距离是相对父盒子div来讲的，那么此时将offsetX和offsetY赋值给p标签定位的left和top值，也就是p标签距离父盒子的位置，同样是鼠标所在位置，这时鼠标在哪里，p标签就在哪里定位，就实现了p标签跟随鼠标移动的效果。

● 上面虽然实现了p标签跟随鼠标移动，但是存在问题就是offsetX和offsetY是相对于触发事件左上角的距离，当p标签跟着鼠标移动的过程中，难免鼠标会误跑到p标签身上，此时这个offsetX和offsetY就不在是相对于div左上角的距离了，p标签此时的定位就会出现问题。（可能又有人疑惑为什么鼠标跑到p标签上了，p标签没有绑点击事件，父盒子绑了点击事件，父盒子也会触发，详细介绍请见：事件的传递：标准事件流解释仅仅点击子盒子，绑定事件的父盒子会触发_陌一一的博客-CSDN博客）

● 给p标签加一个样式：pointer-events：none；pointer-events是鼠标事件，加了这个样式，p标签就不会出现上面的效果了。这个属