mouseout以及mouseover
两个图层 红色图层代表outside蓝色图层代表inside
dom结构如下
<div id="outside">
<div id="inside">
</div>
</div>
<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;}
#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");
});
});
$("#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
个人笔记 记录学习过程