如何让mouseover事件在多个同class元素上生效实现悬停旋转？

问题分析 #

1. 元素选择局限：document.querySelector(".images")仅匹配页面中第一个带.images类的图片，其余图片无法触发旋转效果。
2. CSS语法错误：@keyframes rotate1的100%规则未闭合大括号，导致动画无法被浏览器正常解析。
3. 事件类型不合适：mouseover会因事件冒泡（比如鼠标划过图片内部子元素）重复触发，而mouseenter仅在鼠标首次进入元素范围时触发，更适配悬停场景。
4. 定时器逻辑缺陷：快速多次悬停时，多个独立定时器会导致类名移除时机混乱，动画效果出现异常。

修正后的代码 #

CSS 部分

.principalanimation {
  animation-name: rotate1;
  animation-timing-function: linear;
  animation-duration: 1s;
  /* 显式声明旋转原点为元素中心，确保旋转效果符合预期 */
  transform-origin: center center;
}

@keyframes rotate1 {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  } /* 补充闭合大括号，修复语法错误 */
}

JavaScript 部分

// 获取所有带.images类的图片元素
const imageElements = document.querySelectorAll(".images");

imageElements.forEach(img => {
  let animationTimer = null;
  
  // 使用mouseenter事件避免冒泡触发重复动画
  img.addEventListener("mouseenter", function() {
    // 清除之前的定时器，解决快速悬停的冲突问题
    if (animationTimer) clearTimeout(animationTimer);
    this.classList.add("principalanimation");
    
    // 用animationend事件替代固定时长定时器，精准匹配动画结束时机
    const handleAnimationEnd = () => {
      this.classList.remove("principalanimation");
      this.removeEventListener("animationend", handleAnimationEnd);
    };
    this.addEventListener("animationend", handleAnimationEnd);
  });
});

额外优化说明 #

• 用animationend事件替代setTimeout，能精准在动画自然结束后移除类名，避免因修改动画时长导致的逻辑不匹配。
• 遍历所有图片元素绑定事件，确保页面中每个目标图片都能触发旋转效果。
• 增加定时器清除逻辑，防止快速连续悬停时出现的动画叠加、类名异常问题。

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