jQuery mouseenter()与mouseover()的使用说明
摘要：当鼠标指针穿过元素时，会发生 mouseenter 事件。该事件大多数时候会与 mouseleave 事件一起使用。 下面我们来看一下mouseenter()和mouseleave()结合使用的用法 HTML： div style='width:300px; height:20
当鼠标指针穿过元素时，会发生 mouseenter 事件。该事件大多数时候会与 mouseleave 事件一起使用。
下面我们来看一下mouseenter()和mouseleave()结合使用的用法
HTML：
<div style='width:300px; height:200px; background:#ccc;'></div>
Js:
$(function(){
var bg=$('div').css('background'); //获取元素原有的背景色
$('div').mouseenter(function(){
$(this).css('background','red');
//alert('鼠标(进入)穿过才能触发该事件哦！');
}).mouseleave(function(){
$(this).css('background',bg);
});
});
运行这段代码会看到，随着鼠标在元素上移进移出，元素背景也在不断发生变化！当然如果你把上面js中mouseenter()事件用mouseover()事件代替运行效果也是一样的！难道这两个事件所起的效果是相同的？答案当然是否定的，下面我们来看一下这两个事件的区别：
注释：与 mouseover 事件不同，只有在鼠标指针穿过被选元素时，才会触发 mouseenter 事件。如果鼠标指针穿过任何子元素，同样会触发 mouseover 事件。对应mouseleave
这样的话，mouseenter子元素不会反复触发事件，否则在IE中经常有闪烁情况发生。
下面我们来看一下mouseenter()和mouseleave()结合使用的用法
HTML：
<div style='width:300px; height:200px; background:#ccc;'></div>
Js:
$(function(){
var bg=$('div').css('background'); //获取元素原有的背景色
$('div').mouseenter(function(){
$(this).css('background','red');
//alert('鼠标(进入)穿过才能触发该事件哦！');
}).mouseleave(function(){
$(this).css('background',bg);
});
});
运行这段代码会看到，随着鼠标在元素上移进移出，元素背景也在不断发生变化！当然如果你把上面js中mouseenter()事件用mouseover()事件代替运行效果也是一样的！难道这两个事件所起的效果是相同的？答案当然是否定的，下面我们来看一下这两个事件的区别：
注释：与 mouseover 事件不同，只有在鼠标指针穿过被选元素时，才会触发 mouseenter 事件。如果鼠标指针穿过任何子元素，同样会触发 mouseover 事件。对应mouseleave
这样的话，mouseenter子元素不会反复触发事件，否则在IE中经常有闪烁情况发生。
运行以下代码，来了解mouseenter()与mouseover()的区别
