mouseover，mouseout问题点
# 具体遇到的问题
# 报错信息的截图
您好，老师，我想咨询一下上述问题点，当移入one的时候，是会打印出one over ，但是为什么接下来会打印出one out呢？因为蓝色的是two本身two这个div容器是属于one中的，就是onediv里面包含了two 所以哪怕是移入了two当中，其实one over也是成立的呀？ 接下来是two over one over 这个可以理解的 然后鼠标移出的时候，会有一个区域是既不属于one 也不属于two？ 因为consolelog打印显示了 two out和one out 这个是因为什么原因呢？鼠标所在的位置其实是在one整个div中的呀？
# 相关课程内容截图
# 尝试过的解决思路和结果
# 粘贴全部相关代码，切记添加代码注释（请勿截图）
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div class="one" style="width: 200px;height: 200px;background-color: red;">
<div class="two" style="width: 100px;height: 100px;background-color: blue;"></div>
</div>
<script type="text/javascript" src="http://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
<script type="text/javascript">
$('.two').mouseover(function(){
console.log('two over');
})
$('.two').mouseout(function(){
console.log('two out');
})
$('.one').mouseover(function(){
console.log('one over');
})
$('.one').mouseout(function(){
console.log('one out');
})
</script>
</body>
</html>
在这里输入代码，可通过选择【代码语言】突出显示
正在回答
同学你好，这个是和事件冒泡有关系的。mouseover，mouseout事件会冒泡。过程如下：
移入过程：
鼠标移入红色盒子，会打印one over，移入蓝色盒子，会先触发红色盒子的移出事件，打印one out，再触发蓝色盒子的移入事件，打印two over，再触发红色盒子的移入事件，打印one over。
移出过程：
鼠标移出蓝色盒子，打印two out，红色盒子的移出事件也会被触发，打印one out，进入了红色盒子，打印one over，移出红色盒子打印one out。
关于事件冒泡，老师在课程中讲解过，可以再去回顾下，链接：https://class.imooc.com/course/777
祝学习愉快~
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星