为什么此JavaScript/CSS动画仅对第一个圆形元素生效，其余元素无响应？

你编写的代码中使用document.querySelector('.circle')选择元素，该API仅会返回页面内第一个匹配.circle类名的DOM节点，其余圆形元素没有被选中、也没有绑定鼠标事件，因此只有第一个圆形可以触发过渡效果。同时你代码中判断类名是否存在的逻辑属于多余代码，classList.add、classList.remove方法会自动处理重复添加/移除类名的场景，不会抛出异常。

将选择器替换为document.querySelectorAll('.circle')获取所有圆形元素，遍历每个元素分别绑定事件即可。

// 获取所有匹配类名的圆形元素
const circles = document.querySelectorAll('.circle')

// 遍历每个元素分别绑定鼠标事件
circles.forEach(circle => {
  circle.addEventListener('mouseenter', () => {
    circle.classList.add('hover')
  })

  circle.addEventListener('mouseleave', () => {
    circle.classList.remove('hover')
  })
})

原有CSS、HTML代码无需调整，替换JS代码后所有圆形元素即可正常触发过渡动画。

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