需求：当我们鼠标放在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>结果：
