鼠标悬停超链接时为Font Awesome图标添加fa-shake类的问题

错误原因分析 #

你遇到的Cannot read properties of null (reading 'addClass')报错，是因为e.target.closest(".fas")返回了null。.fas图标并不是a标签的祖先元素——它和a标签属于同一个.icon-hyperlink容器下的同级子元素，closest()方法只能向上查找当前元素的祖先节点，自然找不到目标图标。

后来的写法$(e.target.closest(".fas")).addClass("fa-shake")不报错，但本质是对一个空的jQuery对象执行操作，所以没有任何效果。

正确实现代码 #

通过先找到a标签所在的父容器.icon-hyperlink，再在容器内定位图标元素，就能解决问题：

$(document).ready(function() {
    $(".icon-hyperlink a").hover(
        function() {
            // 找到当前a的父容器，再定位里面的图标元素
            $(this).closest(".icon-hyperlink").find(".fas").addClass("fa-shake");
        },
        function() {
            $(this).closest(".icon-hyperlink").find(".fas").removeClass("fa-shake");
        }
    );
});

代码说明 #

• $(this)：指代当前触发hover事件的a标签元素
• closest(".icon-hyperlink")：向上查找最近的.icon-hyperlink父容器
• find(".fas")：在父容器内找到目标图标元素
• 最后执行addClass/removeClass来控制抖动效果

可选纯CSS方案（无需JS） #

如果不想用JavaScript，也可以利用CSS的父容器hover状态直接触发动画：

/* 直接复用Font Awesome的fa-shake动画逻辑 */
.icon-hyperlink:hover .fas {
    --fa-animation-duration: 0.3s;
    --fa-animation-iteration-count: infinite;
    animation: fa-shake var(--fa-animation-duration) var(--fa-animation-timing) var(--fa-animation-iteration-count);
}

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