jQuery mouseenter()

简介

mouseenter()是jQuery中的一个事件函数。它在鼠标进入指定元素时触发。与mouseover()类似，但有一些区别。

语法

$(selector).mouseenter(function)

参数

• function：必需，规定当事件被触发时运行的函数。

返回值

该函数没有返回值。

示例

HTML代码：

<div id="box">
  鼠标移入我时，我将变为红色。
</div>

jQuery 代码：

$(document).ready(function(){
  $("#box").mouseenter(function(){
    $(this).css("color", "red");
  });
});

效果预览：

区别

mouseenter()和mouseover()都在鼠标进入元素时触发。但是，它们之间存在一些区别：

• mouseenter()不会冒泡到其子元素，而mouseover()会冒泡到其子元素。
• mouseenter()只会在鼠标从元素外部进入时触发一次，而mouseover()会在鼠标进入元素或其子元素时持续触发。

注意事项

• mouseenter()和mouseleave()一般都优于mouseover()和mouseout()，因为它们不会因为鼠标在内部移动而重复触发。
• mouseenter()是没有缩写形式的，mouseleave()的缩写形式是mouseout()。
• mouseenter()不支持动态绑定。如果你需要在元素动态添加后绑定事件，应该使用on()。

参考链接

• jQuery mouseenter() 方法