📜  un hover in jquery - Javascript (1)

📅  最后修改于: 2023-12-03 15:20:49.046000             🧑  作者: Mango

在 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() 方法,可以方便地实现鼠标悬停时的操作。通过指定不同的回调函数,可以实现各种不同的效果。同时,该方法还可以用于添加鼠标进入和鼠标离开时的不同样式等操作。