在 jQuery 中的 hover() 方法

简介

在 jQuery 中，可以使用 hover() 方法来添加鼠标悬停时的操作。该方法接收两个回调函数，分别代表鼠标进入和鼠标离开时需要执行的操作。

语法

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

参数：

• handlerIn：鼠标进入时需要执行的函数。
• handlerOut：鼠标离开时需要执行的函数。

示例

HTML

<div id="box">鼠标移到此处</div>

CSS

#box {
  width: 100px;
  height: 100px;
  background-color: gray;
  color: white;
  text-align: center;
  line-height: 100px;
  cursor: pointer;
}

JavaScript

$(document).ready(function() {
  // 鼠标进入时将背景色改为黑色
  // 鼠标离开时将背景色改回灰色
  $("#box").hover(function() {
    $(this).css("background-color", "black");
  }, function() {
    $(this).css("background-color", "gray");
  });
});

演示

可以通过以下链接查看本示例的在线演示效果：

鼠标悬停操作示例

总结

使用 jQuery 中的 hover() 方法，可以方便地实现鼠标悬停时的操作。通过指定不同的回调函数，可以实现各种不同的效果。同时，该方法还可以用于添加鼠标进入和鼠标离开时的不同样式等操作。