悬停动态元素上的 jQuery

jQuery 提供了许多方便的方法来处理悬停在动态元素上的事件。在本文中，我们将学习如何使用 jQuery 处理悬停事件，并介绍一些常用的方法和技巧。

jQuery 悬停事件

jQuery 提供了 hover() 方法，它可以在光标进入和离开元素时触发事件。该方法需要两个参数，第一个参数为进入时要执行的函数，第二个参数为离开时要执行的函数。例如：

$(element).hover(function(){
    // 当光标进入元素时执行的代码
}, function(){
    // 当光标离开元素时执行的代码
});

我们可以使用 mouseenter() 和 mouseleave() 方法来分别处理进入和离开事件：

$(element).mouseenter(function(){
    // 当光标进入元素时执行的代码
}).mouseleave(function(){
    // 当光标离开元素时执行的代码
});

示例

首先，我们创建一个 HTML 文档，其中包含一个包含文本的 <div> 元素：

<div id="myDiv">悬停在我上面</div>

接下来，我们使用 CSS 指定该元素的样式：

#myDiv {
  width: 200px;
  height: 100px;
  background-color: #f00;
  color: #fff;
  text-align: center;
  line-height: 100px;
  font-size: 24px;
  cursor: pointer;
}

在文档加载完成后，我们使用 jQuery 选择该元素，并为其绑定进入和离开事件：

$(document).ready(function() {
  $('#myDiv').mouseenter(function(){
    $(this).text('鼠标进入');
  }).mouseleave(function(){
    $(this).text('鼠标离开');
  });
});

运行结果如下：

其他技巧

使用 toggleClass() 方法

toggleClass() 方法可以用来切换类。我们可以定义一个包含元素悬停时要使用的类的 CSS 文件，然后使用 toggleClass() 方法在进入和离开时切换类：

<div id="myDiv2" class="myClass">悬停在我上面</div>

.myClass {
  background-color: #0f0;
}
.myHoverClass {
  background-color: #00f;
}

$(document).ready(function() {
  $('#myDiv2').hover(function(){
    $(this).toggleClass('myHoverClass');
  });
});

使用 animate() 方法

animate() 方法可以用来创建动画效果。我们可以使用它来在进入和离开时改变元素的样式：

$(document).ready(function() {
  $('#myDiv').hover(function(){
    $(this).animate({
      width: '300px',
      height: '150px'
    }, 500);
  }, function(){
    $(this).animate({
      width: '200px',
      height: '100px'
    }, 500);
  });
});

以上就是 jQuery 处理悬停事件的介绍，希望对你有所帮助！