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 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>I thing you should use querySelectorAll instead of querySelector, querySelector returns only the first matching element.
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.