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

Question

I am trying to get multiple different circles to do this transition, but only the first one will trigger the effect (regardless of where the rest are on the page)

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>

edit Thanks everyone, I was adding way more than I needed, such a simple fix.

That's because document.querySelector only returns the first matching element. Instead, loop through the elements returned by document.querySelectorAll and apply the event listeners to each. — James, Nov 29 '21 at 19:57
Why aren’t you using `:hover` in CSS? Read the [documentation](//developer.mozilla.org/docs/Web/API/Document/querySelector). Use [event delegation](//developer.mozilla.org/docs/Learn/JavaScript/Building_blocks/Events#Event_delegation) instead of assigning multiple event listeners. E.g., use an [event argument](//developer.mozilla.org/docs/Web/API/EventTarget/addEventListener#The_event_listener_callback)’s [`target`](//developer.mozilla.org/docs/Web/API/Event/target). See [the tag info](/tags/event-delegation/info) and [What is DOM Event delegation?](/q/1687296/4642212). — Sebastian Simon, Nov 29 '21 at 19:58

score 1 · Accepted Answer · answered Nov 29 '21 at 20:03

That is because let circle = document.querySelector('.circle') only selects a single element.

You should use querySelectorAll and iterate over the results

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>

But you can accomplish the same with just CSS. Use .circle:hover instead of .circle in the css rule

.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>

score 1 · Answer 2 · answered Nov 29 '21 at 20:14

1

I thing you should use querySelectorAll instead of querySelector, querySelector returns only the first matching element.

answered Nov 29 '21 at 20:14

Chlo fmk

26
2

score 0 · Answer 3 · answered Nov 29 '21 at 20:01

To answer your question directly, you will need to use querySelectorAll and apply your listener to each circle individually. querySelectorAll creates an iterable HTML collection.

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');
    }
  })
})

However, as mentioned by @Sebastian, the correct way to implement a hover is by using a pseudo class, like:

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

Doing this removes the need for all that javascript.

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

3 Answers3