需求：当我们鼠标放在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标签就不会出现上面的效果了。这个属性称为“穿透”。
●添加完定位后结果：
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>*{margin: 0%;padding: 0%;}#box{width: 200px;height: 50px;background-color: aqua;position: relative;}#box p{width: 300px;height: 200px;background-color: coral;position: absolute;left: 100px;top: 100px;}</style></head><body><div id="box">yiyi<p>自我介绍</p></div><script></script></body>
结果：
●鼠标在div身上移入移出，p标签显示隐藏的效果：
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>*{margin: 0%;padding: 0%;}#box{width: 200px;height: 50px;background-color: aqua;position: relative;}#box p{width: 300px;height: 200px;background-color: coral;position: absolute;left: 100px;top: 100px;/* 隐藏 */display: none;}</style></head><body><div id="box">yiyi<p>自我介绍</p></div><script>box.onmouseover = function(){this.firstElementChild.style.display = "block"}box.onmouseout = function(){this.firstElementChild.style.display = "none"}</script></body>
结果：
●添加鼠标移动事件以后：
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>*{margin: 0%;padding: 0%;}#box{width: 200px;height: 50px;background-color: aqua;position: relative;}#box p{width: 300px;height: 200px;background-color: coral;position: absolute;left: 100px;top: 100px;/* 隐藏 */display: none;}</style></head><body><div id="box">yiyi<p>自我介绍</p></div><script>box.onmouseover = function(){this.firstElementChild.style.display = "block"}box.onmouseout = function(){this.firstElementChild.style.display = "none"}box.onmousemove = function(evt){this.firstElementChild.style.left = evt.offsetX+"px"this.firstElementChild.style.top = evt.offsetY+"px"}</script></body></html>
效果：
●添加完：pointer-events：none；以后效果：
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>*{margin: 0%;padding: 0%;}#box{width: 200px;height: 50px;background-color: aqua;position: relative;}#box p{width: 300px;height: 200px;background-color: coral;position: absolute;left: 100px;top: 100px;/* 隐藏 */display: none;/* 穿透 */pointer-events: none;}</style></head><body><div id="box">yiyi<p>自我介绍</p></div><script>box.onmouseover = function(){this.firstElementChild.style.display = "block"}box.onmouseout = function(){this.firstElementChild.style.display = "none"}box.onmousemove = function(evt){this.firstElementChild.style.left = evt.offsetX+"px"this.firstElementChild.style.top = evt.offsetY+"px"}</script></body></html>
结果：
