mouseout以及mouseover

两个图层 红色图层代表outside蓝色图层代表inside

dom结构如下

<div id="outside">
     <div id="inside">
     </div>
</div>

样式为

#outside{width:300px; height:180px;position:relative;background:red;}
     #inside{width:400px; height:200px;position:absolute;left:50px;top:50px;background:blue;}

分别为这两个图层绑定事件 为mouseout  mouseover事件

jquery代码如下

$(function(){
$("#outside").hover(function(){
console.log("the mouse over outside");
},function(){
console.log("the mouse out outside");
});
$("#inside").hover(function(){
console.log("the mouse over inside");
},function(){
console.log("the mouse out inside");
});
});

分为以下几种情况(1-3是一个完整的移入移出过程)

(1)鼠标从outside层进入 输出信息为

the mouse over outside

(2)鼠标从outside移入inside时的输出信息为 

the mouse over inside

注意：这时并没有触发outside的mouseout事件 所以输出只有一条信息

(3)鼠标从inside移出 输出信息为

the mouse out inside

the mouse out outside

原因是事件冒泡机制

 

 

4-6是一个完整的移入移出过程

(4)鼠标从inside层进入的输出信息为

the mouse over inside

the mouse over outside

原因还是事件冒泡

(5)鼠标从inside移入outside(前提是从inside移入)输出的信息为

the mouse out inside 

这时不会输出the mouse over outside

(6)鼠标从outside移出 输出信息为

the mouse out outside

 

个人笔记 记录学习过程