如何解决鼠标悬停时所有链接均触发CSS动画而非单个链接的问题？

嘿，我懂你遇到的这个小坑！这是jQuery新手常犯的一个细节错误，咱们一步步捋清楚：

先说说你代码里的核心问题：你写的this.addClass("myeffect")其实有两个问题：

• 原生DOM元素本身没有addClass这个方法，这是jQuery专属的方法，直接用this调用会报错；
• 如果你不小心手滑写成了$("a").addClass("myeffect")，那每次鼠标碰任何一个链接，都会给页面上所有<a>标签加上类，自然所有链接都会一起触发动画。

正确的jQuery写法 #

要只让当前悬停的链接动起来，你需要用$(this)来指代当前被鼠标选中的那个链接元素——它是jQuery包装后的对象，能正常调用addClass方法。同时别忘了鼠标离开时移除类，不然动画会一直留在链接上：

// 分开处理鼠标进入和离开事件
$("a").mouseenter(function() {
  $(this).addClass("myeffect");
}).mouseleave(function() {
  $(this).removeClass("myeffect");
});

或者用更简洁的hover方法，它能同时处理悬停和离开两个事件：

$("a").hover(
  function() {
    $(this).addClass("myeffect");
  },
  function() {
    $(this).removeClass("myeffect");
  }
);

更推荐的纯CSS方案 #

其实如果只是鼠标悬停的动画，完全不用写JavaScript，用CSS的:hover伪类就能实现，性能更好还没兼容性问题：

/* 给悬停的链接绑定动画 */
a:hover {
  animation: myeffect 0.3s ease forwards;
}

/* 自定义你的动画效果 */
@keyframes myeffect {
  from {
    text-decoration: underline;
    color: #ff4500;
  }
  to {
    text-decoration: none;
    color: #1e90ff;
  }
}

这样写的话，浏览器会自动识别鼠标悬停的那个链接，只给它应用动画，完全不用操心选中多个元素的问题~

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