jquery mouseout和mouseleave区别

mouseout()和mouseleave()

都是鼠标移出元素时触发，但是这两者又有所区别，需要大家留意：

不论鼠标指针离开指定元素还是该元素子元素，都会触发 mouseout 事件。

只有在鼠标指针离开指定元素时，才会触发 mouseleave 事件。

举个例子来说：

现在有两个div，第一个<div>初始红色并且有个子元素<a>，第二个<div>初始为绿色

1 <div id="1"style=" 200px;height: 200px;background-color: red;margin-bottom: 10px;">
2 
3     <a>hehe</a>
4 
5 </div>
6 
7 <div id="2"style=" 200px;height: 200px;background-color: green;margin-bottom: 10px;"></div>

现在我们分别用mouseout和mouseleave测试

 1  $(document).ready(function()
 2 
 3 {
 4 
 5     $("#1").mouseout(function()//此方式下，当鼠标移出<a>元素也会触发
 6 
 7     {
 8 
 9         $("#2").css("background-color","yellow");
10 
11     });
12 
13 });  
14 
15 $(document).ready(function()
16 
17 {
18 
19     $("#1").mouseout(function()//只有鼠标移出#1<div>时才会触发
20 
21     {
22 
23         $("#2").css("background-color","blue");
24 
25     });
26 
27 });

　　今天在做放大镜效果时，出现了光标的div跳动的情况，查资料并记录。