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.

CodePudding user response：

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>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

---

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>

<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

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

CodePudding user response：

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.