Remove active class "classList.remove" in Javascript

Question

I have javascript code that adds class to the div panel-s-c-3 on mouseover. So if I hover the item, it will add class active-s-c-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");
    });
}

question from:https://stackoverflow.com/questions/66059281/remove-active-class-classlist-remove-in-javascript

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