想写一个购物网站商品预览图鼠标放上去会生成一个对应区域放大效果的盒子，但是在鼠标离开后隐藏遮罩层的这一步出了问题。当没添加move事件的时候mouseout判断标准就是imgbox，离开了imgbox就会触发，属于我想要的效果，但是添加了move事件后，mouseout判定标准变成了离开页面才触发，想不明白为什么会这样以及要怎么解决，求助各位大神，代码如下
<body>
<div class="box">
<div class="imgbox">
<img src="img/1.png" alt="">
<div class="cover"></div>
</div>
<div class="bigger"></div>
</div>
</body>
<style>
.box {
position: relative;
margin: 100px auto;
width: 800px;
background-color: pink;
}
.imgbox {
position: relative;
width: 500px;
height: 500px;
}
.imgbox img {
width: 100%;
height: 100%;
}
.cover {
position: absolute;
top: 0px;
left: 0px;
width: 200px;
height: 200px;
background-color: rgba(0, 0, 0, .3);
}
.bigger {
position: absolute;
top: 125px;
left: 520px;
width: 250px;
height: 250px;
background-color: rosybrown;
}
</style>
<script>
var box = document.querySelector('.box');
var imgbox = document.querySelector('.imgbox'); // 装图片的盒子
var cover = document.querySelector('.cover'); // 半透明遮罩层
var bigger = document.querySelector('.bigger'); // 放大图片的盒子
function move(e) { //cover盒子跟随鼠标
var x = e.pageX - box.offsetLeft - 100;
var y = e.pageY - box.offsetTop - 100;
cover.style.top = y + 'px'
cover.style.left = x + 'px'
}
imgbox.addEventListener('mouseenter', function (e) { //鼠标放上去就显示cover遮罩层和bigger放大盒子
cover.style.display = 'block'
bigger.style.display = 'block'
})
imgbox.addEventListener('mouseout', function () { // 鼠标离开就隐藏cover遮罩层和bigger放大盒子
cover.style.display = 'none'
bigger.style.display = 'none'
console.log(2); //检测Mouseout生效的
})
imgbox.addEventListener('mousemove',move)//问题就出在这里 注释掉这句代码就可以正常显示隐藏cover和bigger 加了move事件后mouseout的判定out就变成了页面窗口 只有鼠标离开了页面窗口才会触发mouseout
</script>
试一下阻止事件冒泡 ，在点击事件里加入 e.stopPropagation()
imgbox.addEventListener('mouseenter', function (e) { //鼠标放上去就显示cover遮罩层和bigger放大盒子
e.stopPropagation()
cover.style.display = 'block'
bigger.style.display = 'block'
}
如有帮助， 望采纳 ^.^