如何使用jQuery移除链接的:hover状态？附菜单代码示例

嘿，首先得明确一个关键点：CSS 的 :hover 伪类是浏览器原生处理的，jQuery 没办法直接修改或者移除这个伪类本身。不过咱们可以通过覆盖样式或者解绑JS绑定的hover事件来实现禁用hover效果的目的，下面给你两种靠谱的方案：

方案1：用自定义类覆盖hover样式（最常用） #

这是最稳妥的做法，毕竟纯CSS的hover效果只能靠CSS来覆盖：

1. 先在你的样式表里加一个专门用来禁用hover的类：

.no-hover:hover {
  /* 把这里的样式设置成和链接默认状态一致，就能覆盖原来的hover效果 */
  color: inherit; /* 继承父元素的文字颜色，代替hover时的变色 */
  background-color: inherit; /* 继承背景色，代替hover时的背景变化 */
  /* 要是原来还有其他hover样式（比如边框、阴影），也都设成默认状态就行 */
}

2. 然后用jQuery给目标菜单链接加上这个类：

// 给所有带menu类的链接都加上no-hover类，全部禁用hover
$('.menu').addClass('no-hover');

// 要是只想禁用某一个，比如Item 2的链接，就选对应的ID
$('#link2').addClass('no-hover');

这样鼠标悬停的时候，这个类的样式会优先生效，就看不到原来的hover效果了。

方案2：解绑JS绑定的hover事件（仅针对JS触发的hover） #

如果你的hover效果是用jQuery的hover()方法绑定的JS逻辑（比如悬停时弹出弹窗、切换内容），那可以直接解绑这些事件：

// 解绑所有menu类链接的mouseenter和mouseleave事件（hover本质是这俩事件的组合）
$('.menu').off('mouseenter mouseleave');

注意哦，这个方法只对JS绑定的hover行为有用，如果是纯CSS写的:hover样式，还是得用方案1才行。

要是你之后还想恢复hover效果，也可以用toggleClass('no-hover')来切换这个类的开关，很方便。

内容的提问来源于stack exchange，提问作者DiMono