如何实现鼠标悬停链接时触发箭头图标循环平移动画？

CSS方法的问题与修复 #

你的CSS没生效核心是两个错误：

1. 选择器匹配错误：.linkHeader:hover .arrowIconHeader 是查找.linkHeader内部的子元素，但箭头SVG和链接是同级关系，并非子元素，所以这个选择器无法匹配到目标元素。
2. 属性重复写错：你重复声明了animation-duration，需要把第二个改为animation-iteration-count: infinite来实现循环播放。

修复后的CSS代码：

@keyframes arrowTransition {
  from { transform: translateX(0%); }
  to { transform: translateX(-20%); }
}

/* 方案1：父容器hover触发，鼠标在整个区域内都能激活动画 */
.linkHeaderDiv:hover .arrowIconHeader {
  animation: arrowTransition 2s alternate infinite ease-in-out;
}

/* 方案2：仅鼠标悬停在链接上时触发（相邻兄弟选择器） */
/* .linkHeader:hover + .arrowIconHeader {
  animation: arrowTransition 2s alternate infinite ease-in-out;
} */

JavaScript方法的问题与修复 #

JS代码的问题点：

1. getElementsByClassName返回的是HTMLCollection类数组对象，不是单个DOM元素，直接调用addEventListener或animate会报错，需要取数组第一个元素。
2. 事件监听的事件名应为mouseover，而非onmouseover。
3. 缺少鼠标移出时停止动画的逻辑，会导致动画持续播放无法停止。

修复后的JS代码：

// 获取单个DOM元素（取类数组的第一个元素）
const linkHeader = document.getElementsByClassName('linkHeader')[0];
const arrowIconHeader = document.getElementsByClassName('arrowIconHeader')[0];
let animationInstance = null;

// 启动动画函数
function startArrowAnimation() {
  // 先取消之前的动画（防止重复触发）
  if (animationInstance) animationInstance.cancel();
  animationInstance = arrowIconHeader.animate(
    [{ transform: 'translateX(0px)' }, { transform: 'translateX(-20px)' }],
    { 
      duration: 2000, 
      iterations: Infinity, 
      direction: 'alternate', 
      easing: 'ease-in-out' 
    }
  );
}

// 停止动画函数
function stopArrowAnimation() {
  if (animationInstance) {
    animationInstance.cancel();
    // 重置箭头位置
    arrowIconHeader.style.transform = 'translateX(0px)';
  }
}

// 绑定鼠标事件
linkHeader.addEventListener('mouseover', startArrowAnimation);
linkHeader.addEventListener('mouseout', stopArrowAnimation);

额外优化建议 #

• 优先使用CSS方案，代码更简洁，性能比JS动画更优。
• 若用JS方案，建议给父容器.linkHeaderDiv绑定事件，这样鼠标放在箭头区域也能触发动画，交互体验更流畅。
• HTML中的<script>标签建议移到</body>标签前，确保DOM加载完成后再执行JS代码，避免出现无法获取元素的问题。

内容的提问来源于stack exchange，提问作者Giorgio Giovanni Mattio