刪除 Javascript 中的活動 class “classList.remove”

Question

我有 javascript 代碼，在鼠標懸停時將 class 添加到 div panel-sc-3 。 因此，如果我 hover 項目，它將添加 class active-sc-cardexp 。 離開項目區域后，我需要刪除該 class 。 這就是我所擁有的。 任何建議都會很高興..

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

您可以在 mouseleave 事件中刪除活動的 class，如下所示：

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

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

Answer 2

您可以嘗試使用 mouseenter 添加 class active-sc-cardexp然后 mouseleave 刪除 class