JS animation only effects one element and it barely works

Solution 1:

There are two things you could do to make it works.

First, document.querySelector() only return a single element, which answers why only the customizer button works. To fix this, you need to use document.querySelectorAll(".dropdown").

Second, inside the event listener, I understand that you want to select the ".dropdown-content" of the dropdown that is being hovered. But document.querySelector(".dropdown-content") will just simply select all the dropdown content in the DOM. To fix this, you need to replace document with the current dropdown element.

Here is the full script I've re-written from your codepen:

// select all dropdown buttons
const buttons = document.querySelectorAll(".dropdown");

// loop through each button
buttons.forEach(button => {
  button.addEventListener("mouseenter", e => {

    // e.target => the one that you're hovering
    e.target
      .querySelector(".dropdown-content")
      .classList.toggle("scale-up-ver-top");
  });
});

Check it out at this codepen, I also added a mouseleave event.

Solution 2:

document.querySelector(".dropdown") only returns the first element found with the dropdown class. You need querySelectorAll, and then you need to loop through all of the elements and add a mousenter listener to each one.

Solution 3:

If you refer to you have to toggle two times then, it works, it because you set the classList.toggle which means at first time, it will add the "scale-up-ver-top" class to the element and second time it will find the old "scale-up-ver-top" and it will remove it a possible solution is to add (toggle, true) which means it will only add class to the element.

const button = document.querySelector(".dropdown");
button.addEventListener("mouseenter", (e) => {
document
    .querySelector(".dropdown-content")
    .classList.toggle("scale-up-ver-top", true);

If you are refers to the problem, you want to assign all the buttons, use:

const button = document.querySelectorAll(".dropdown");
button.forEach(item =>{
item.addEventListener("mouseenter", (e) => {
document
    .querySelector(".dropdown-content")
    .classList.toggle("scale-up-ver-top");
  document
    .querySelector(".dropdown-content")
    .classList.toggle("scale-up-ver-top");
});
})