JavaScript如何实现鼠标悬停添加、移出时移除class类名

你只绑定了mouseover（鼠标移入）事件，回调里用的classList.toggle()是无差别状态切换：每次事件触发就把类的存在状态翻转一次。你全程没监听鼠标移出事件，当然不会在鼠标离开时自动移除类，必须等下一次鼠标移入触发toggle，才会把已经加上的active类去掉，和你碰到的现象完全吻合。

不要在这种固定交互逻辑里用toggle，直接拆分移入加类、移出删类的逻辑，同时补个容错避免找不到元素时报错：

// 鼠标移入时添加active类
myChart.on('mouseover', function(params){
    const collapseItem = params.name + "-content"
    const toCollapse = document.getElementById(collapseItem)
    if (!toCollapse) return
    const collapseHeading = toCollapse.previousElementSibling
    collapseHeading.classList.add("active")
})

// 鼠标移出时移除active类
myChart.on('mouseout', function(params){
    const collapseItem = params.name + "-content"
    const toCollapse = document.getElementById(collapseItem)
    if (!toCollapse) return
    const collapseHeading = toCollapse.previousElementSibling
    collapseHeading.classList.remove("active")
})

• 固定触发条件的类操作不要随便用toggle()，toggle没有状态校验，只要触发就翻转，很容易出现交互和类状态不同步的问题，明确要加类就用add()，要删类就用remove()，逻辑更可控。
• 操作DOM前先判断目标元素是否存在，避免因为ID匹配失败抛出JS错误，中断页面其他逻辑运行。

内容的提问来源于stack exchange，提问作者Nik