为什么这个 javascript / css 动画只适用于同类动画中的第一个，而不适用于其他动画？

Question

我正在尝试让多个不同的圈子来做这个转换，但只有第一个会触发效果（不管其他人在页面上的什么位置）

javascript

let circle = document.querySelector('.circle')

circle.addEventListener('mouseenter', () => {
    if(!circle.classList.contains('hover')){
        circle.classList.add('hover');
    }
})

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

css

.circle {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100px;
    width: 100px;
    background: slateblue;
    border-radius: 100px;
    font-size: 1.5rem;
    color: #fff;
    cursor: pointer;
    transition: cubic-bezier(0.075, 0.82, 0.165, 1) 3s;
}

.hover {
  transform: scale(1.5);
}

html

<div class="circle">1</div>
<div class="circle">2</div>

编辑谢谢大家，我添加的方式超出了我的需要，如此简单的修复。

Answer 1

要直接回答您的问题，您需要使用 querySelectorAll 并将您的听众分别应用于每个圈子。 querySelectorAll 创建一个可迭代的 HTML 集合。

https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll

let circles = document.querySelectorAll('.circle')
circles.forEach(circle => {
  circle.addEventListener('mouseenter', () => {
    if (!circle.classList.contains('hover')) {
      circle.classList.add('hover');
    }
  })

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

但是，正如@Sebastian 所提到的，实现悬停的正确方法是使用伪 class，例如：

.circle:hover {
  transform: scale(1.5);
}

这样做就不需要 javascript。

Answer 2

那是因为let circle = document.querySelector('.circle') 只选择了一个元素。

您应该使用 querySelectorAll 并迭代结果

const circles = document.querySelectorAll('.circle')

circles.forEach(circle => {
  circle.addEventListener('mouseenter', () => {
    if (!circle.classList.contains('hover')) {
      circle.classList.add('hover');
    }
  })

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

.circle {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100px;
  width: 100px;
  background: slateblue;
  border-radius: 100px;
  font-size: 1.5rem;
  color: #fff;
  cursor: pointer;
  transition: cubic-bezier(0.075, 0.82, 0.165, 1) 3s;
}

.hover {
  transform: scale(1.5);
}

<div class="circle">1</div>
<div class="circle">2</div>

但是您只需 CSS 就可以完成同样的事情。在 css 规则

中使用 .circle:hover 而不是 .circle

.circle {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100px;
  width: 100px;
  background: slateblue;
  border-radius: 100px;
  font-size: 1.5rem;
  color: #fff;
  cursor: pointer;
  transition: cubic-bezier(0.075, 0.82, 0.165, 1) 3s;
}

.circle:hover {
  transform: scale(1.5);
}

<div class="circle">1</div>
<div class="circle">2</div>

Answer 3

我认为你应该使用 querySelectorAll 而不是 querySelector，querySelector returns 只使用第一个匹配元素。

为什么这个 javascript / css 动画只适用于同类动画中的第一个，而不适用于其他动画？

Why is this javascript / css animation only working on the first of its kind and not the rest?

html

javascript

css

css-animations