Estoy tratando de obtener múltiples círculos diferentes para hacer esta transición, pero solo el primero activará el efecto (independientemente de dónde se encuentren los demás en la página)
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>editar Gracias a todos, estaba agregando mucho más de lo que necesitaba, una solución tan simple.
Eso es porque let circle = document.querySelector('.circle') solo selecciona un solo elemento.
Debe usar querySelectorAll e iterar sobre los resultados
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> Pero puedes lograr lo mismo con solo CSS. Use .circle:hover en lugar de .circle en la regla 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; } .circle:hover { transform: scale(1.5); } <div class="circle">1</div> <div class="circle">2</div>Creo que debería usar querySelectorAll en lugar de querySelector, querySelector devuelve solo el primer elemento coincidente.
Para responder a su pregunta directamente, deberá usar querySelectorAll y aplicar su oyente a cada círculo individualmente. querySelectorAll crea una colección HTML iterable.
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'); } }) })Sin embargo, como lo menciona @Sebastian, la forma correcta de implementar un desplazamiento es usando una pseudoclase, como:
.circle:hover { transform: scale(1.5); }Hacer esto elimina la necesidad de todo ese javascript.