如何实现鼠标悬停链接文本时触发fa-spinner的fa-spin动画？

方法一：jQuery实现 #

把hover事件绑定到包含图标的<a>标签上，而非仅绑定图标元素本身，通过事件回调操作子元素的旋转类：

// 选中所有包含.fa-spinner的<a>标签，绑定hover事件
$('a:has(.fa-spinner)').hover(
  // 鼠标进入链接区域时，为内部图标添加旋转类
  function() {
    $(this).find('.fa-spinner').addClass('fa-spin');
  },
  // 鼠标离开链接区域时，移除图标上的旋转类
  function() {
    $(this).find('.fa-spinner').removeClass('fa-spin');
  }
);

方法二：纯CSS实现（更轻量） #

无需依赖jQuery，直接通过CSS父元素的hover状态控制子元素动画，代码简洁且性能更优：

/* 悬停<a>标签时，触发内部.fa-spinner的旋转动画 */
a:hover .fa-spinner {
  -webkit-animation: fa-spin 2s infinite linear;
  animation: fa-spin 2s infinite linear;
}

如果项目已引入Font Awesome样式文件，也可直接复用fa-spin类的样式：

a:hover .fa-spinner {
  @extend .fa-spin;
}

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