网络技术问题 | jQuery 测验 |第 2 组 |问题 9

问题描述

在使用 jQuery 进行开发时，如何为 DOM 元素添加 hover 事件？

解决方案

jQuery 提供了两个方法来为 DOM 元素添加 hover 事件，分别是 .hover() 和 .mouseenter() 和 .mouseleave()。

.hover()

.hover() 方法可以同时绑定鼠标进入和离开事件，它的语法格式如下：

$(selector).hover(handlerIn, handlerOut);

其中 selector 表示要绑定 hover 事件的元素，handlerIn 表示鼠标进入时触发的回调函数，handlerOut 表示鼠标离开时触发的回调函数。

例如，下面的代码为 ID 为 test 的元素添加 hover 事件：

$("#test").hover(function() {
  $(this).css("background-color", "yellow");
}, function() {
  $(this).css("background-color", "green");
});

.mouseenter() 和 .mouseleave()

.mouseenter() 方法只绑定鼠标进入事件，.mouseleave() 方法只绑定鼠标离开事件。它们的语法格式如下：

$(selector).mouseenter(handlerIn);
$(selector).mouseleave(handlerOut);

其中 selector 表示要绑定鼠标进入或离开事件的元素，handlerIn 表示鼠标进入时触发的回调函数，handlerOut 表示鼠标离开时触发的回调函数。

例如，下面的代码为 ID 为 test 的元素添加 hover 事件：

$("#test").mouseenter(function() {
  $(this).css("background-color", "yellow");
});
$("#test").mouseleave(function() {
  $(this).css("background-color", "green");
});

总结

以上就是为 DOM 元素添加 hover 事件的两种方法，.hover() 方法可以同时绑定鼠标进入和离开事件，.mouseenter() 和 .mouseleave() 方法分别绑定鼠标进入和离开事件。根据业务需求选择适合的方法即可。