如何使用jQuery为.nav-link元素的hover伪类添加CSS属性？

嘿，这个问题其实挺常见的，我刚接触JS的时候也踩过这个坑～

首先得说清楚为什么你用$(".nav-link:hover").css({ ... })没用：jQuery的css()方法只能给真实的DOM元素设置内联样式，而:hover是CSS伪类，它代表的是元素的一种状态，并不是一个实际存在的DOM节点，所以没法直接通过这种方式给它设置样式。

给你两种常用的解决方案，看哪种更适合你的场景：

方案1：用CSS类控制hover样式（推荐） #

这种方法更符合“样式与逻辑分离”的原则，维护起来也更方便。

首先在你的CSS文件里定义一个包含hover状态的类：

.nav-link.custom-hover:hover {
  color: #ff4400;
  background-color: #f8f8f8;
  /* 这里写你需要的所有hover样式 */
}

然后用jQuery给目标元素添加这个类：

$(".nav-link").addClass("custom-hover");

如果之后需要取消这个hover样式，只需要移除类就行：

$(".nav-link").removeClass("custom-hover");

方案2：用jQuery的hover事件动态设置样式 #

如果你的hover样式是需要动态生成的（比如根据用户操作或者变量值变化），可以用jQuery的hover()方法绑定鼠标进入和离开的事件，手动设置/恢复样式：

$(".nav-link")
  .hover(
    // 鼠标进入时的样式
    function() {
      $(this).css({
        color: "darkblue",
        borderBottom: "2px solid darkblue"
      });
    },
    // 鼠标离开时恢复样式
    function() {
      // 用空字符串可以移除内联样式，恢复CSS里的原始设置
      $(this).css({
        color: "",
        borderBottom: ""
      });
      // 也可以直接设置成默认样式：
      // $(this).css({ color: "#333", borderBottom: "none" });
    }
  );

这种方法的好处是样式可以完全动态控制，但缺点是把样式逻辑写进了JS里，后期修改样式需要找JS代码，不如方案1直观。

总之，优先推荐方案1，除非你真的需要动态生成样式值～

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