Remove active class “classList.remove” in Javascript

Question

I have javascript code that adds class to the div panel-sc-3 on mouseover. So if I hover the item, it will add class active-sc-cardexp . I need to remove that class after I leave the item area. This is what I have. Will be happy for any suggestions..

const panels2 = document.querySelectorAll(".panel-s-c-3");

panels2.forEach((panel2) => {
    panel2.addEventListener("mouseover", () => {
        removeActiveclasses2();
        panel2.classList.add("active-s-c-cardexp");
    });
});

function removeActiveclasses2() {
    panels2.forEach((panel2) => {
        panel2.classList.remove("active-s-c-cardexp");
    });
}

Answer 1

you can remove active class on mouseleave event as below:

panel2.addEventListener("mouseover", () => {
  panel2.classList.add("active-s-c-cardexp");
});

panel2.addEventListener("mouseleave", () => {
  removeActiveclasses2();
});

Answer 2

You can try using mouseenter to add class active-sc-cardexp and then mouseleave to remove the class