What could be causing this JavaScript/CSS animation to only function on the initial instance and not the subsequent ones?

Question

What could be causing this JavaScript/CSS animation to only function on the initial instance and not the subsequent ones?

I've been attempting to apply this transition effect to multiple circles, but only the first one triggers it no matter where they are positioned on the page.

javascript

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

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 Thank you all for your input, I realized I was overcomplicating things and found a simple solution.

javascript html css css-animations

Answer 1

Answer №1

The reason for this is that the code

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

will only select a single element.

You should instead use querySelectorAll and loop through 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>

Alternatively, you can achieve the same effect using just CSS. Simply replace .circle with .circle:hover 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>

Answer 2

The reason for this is that the code

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

will only select a single element.

You should instead use querySelectorAll and loop through 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>

Alternatively, you can achieve the same effect using just CSS. Simply replace .circle with .circle:hover 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>

Answer 3

Answer №2

In my opinion, utilizing querySelectorAll instead of querySelector would be more beneficial as querySelector only retrieves the first matching element.

Answer 4

In my opinion, utilizing querySelectorAll instead of querySelector would be more beneficial as querySelector only retrieves the first matching element.

Answer 5

Answer №3

In response to your inquiry, the most effective approach would be utilizing querySelectorAll to target each circle individually and then adding event listeners accordingly. The querySelectorAll method generates an iterable collection of HTML elements.

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 highlighted by @Sebastian, it is recommended to utilize a CSS pseudo-class for hover effects:

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

This way eliminates the necessity for extensive JavaScript code.

Answer 6

In response to your inquiry, the most effective approach would be utilizing querySelectorAll to target each circle individually and then adding event listeners accordingly. The querySelectorAll method generates an iterable collection of HTML elements.

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 highlighted by @Sebastian, it is recommended to utilize a CSS pseudo-class for hover effects:

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

This way eliminates the necessity for extensive JavaScript code.

What could be causing this JavaScript/CSS animation to only function on the initial instance and not the subsequent ones?

Answer №1

Answer №2

Answer №3

Similar questions

What is the best way to invoke a function and dynamically load a section of a view using AJAX?

Obtaining the clicked element within a functional component in React

How can you effectively transfer arguments from one component to another using router.push() in Vue.js?

Transfer images from canvas.toDataURL to nodejs

React Button Axios: A Primer for Complete Beginners

Elements powered by jQuery failing to load upon dynamic webpage(s) loading via ajax

The best method for quickly loading a webpage that is over 20MB in size

What is the best way to choose all the options in a drop-down menu using Selenium Webdriver?

Guide to displaying Symfony/Bootstrap checkbox errors outside of the form_widget

Are there any customizable actions available for the `yarn remove [package]` command, such as post-installation hooks?

Storing POST Request Data in Express

Using Javascript to navigate links in a list using keyboard arrow keys

The feature of sorting appears to be malfunctioning within jQuery DataTables

Angular 5 Tutorial: Defining the "of" Method in HTTP Services

I am looking to create a button with a transparent border within a white background container

What are the common practices for UI bindings in JavaScript and AJAX applications?

What is the process for fading out using jQuery?

Upon submission of the form, trigger an email to be sent and simultaneously open a

Transforming an array of JavaScript objects into arrays of key-value pairs based on a specific property with ES6 syntax

Unable to retrieve a substring value in Angular using Typescript