需求是鼠标移入盒子，遮罩层出现，移出消失，这都没有问题，但是当鼠标出现在遮罩层的中间时，鼠标就可以带着遮罩层出去大盒子了，不受mouseout这个事件的影响
<script>
var box = document.querySelector('.box')
var mark = document.querySelector('.mark')
box.addEventListener('mouseover', function () {
mark.style.display = 'block'
})
box.addEventListener('mouseout', function () {
mark.style.display = 'none'
})
box.addEventListener('mousemove', function (e) {
// 计算出鼠标在盒子内的坐标
x = e.pageX - this.offsetLeft
y = e.pageY - this.offsetTop
mark.style.left = x - mark.offsetWidth / 2 + 'px'
mark.style.top = y - mark.offsetHeight / 2 + 'px'
// console.log(x - mark.offsetWidth / 2);
})
</script>
```html
<style>
* {
margin: 0;
padding: 0;
}
.box {
float: left;
position: relative;
width: 400px;
height: 240px;
border: 1px solid black;
}
.mark {
width: 100px;
height: 100px;
z-index: 99;
cursor: move;
position: absolute;
background-color: rgba(18, 56, 210, 0.5);
display: none;
}
#img {
position: absolute;
}
#yl {
float: left;
margin-left: 20px;
width: 400px;
height: 400px;
overflow: hidden;
position: relative;
}
#ylimg {
position: absolute;
}
</style>
</head>
<body>
<div class="box">
<img src="./20211213_170451.jpg" width="400px" id="img" alt="">
<div class="mark"></div>
</div>
```
