jquery 保持hvoer状态

JQuery 是当前最为流行的 JavaScript 库之一，它可以帮助我们更加轻松地操作网页元素，实现各种交互效果。其中，最为常见的一种效果就是当鼠标指针经过某个元素时，该元素会改变状态，并且在鼠标移开后恢复原状。那么，如何使用 JQuery 实现这种效果呢？

$(function() {
  var menuItem = $('.menu-item'); // 指定需要改变状态的元素
  menuItem.hover(
    function() {
      $(this).addClass('active'); // 鼠标经过时添加“active”类
    },
    function() {
      $(this).removeClass('active'); // 鼠标移开时移除“active”类
    }
  );
});

在上述代码中，我们首先通过 JQuery 查找到需要改变状态的元素，这里我们使用了 $('.menu-item')，表示选择类名为“menu-item”的元素。接下来，我们使用 hover() 方法，将一个函数绑定到当鼠标指针进入元素、以及退出元素时发生的事件上。在进入元素时，我们使用 addClass() 方法添加一个名为“active”的类，从而改变元素的样式。在退出元素时，我们使用 removeClass() 方法将“active”类移除，让元素恢复原状。

需要注意的是，在 HTML 中预先定义一个“active”类，以及定义鼠标经过和移开时元素的样式，这样才能让效果得以展现。

通过 JQuery 保持 Hover 状态并不复杂，只需要加入上述代码，再配合适当的样式定义即可。相信经过实践后，你也可以实现这种实用的交互效果。