如何 add/remove class 鼠标悬停在 JavaScript 上？

Question

我想在将鼠标悬停在某个项目上时添加 class，并在 JavaScript 中将鼠标悬停后立即将其删除。目前，我的代码不会删除 class，直到我再次将鼠标悬停在该项目上。

    myChart.on('mouseover', function(params){
        var collapseItem = params.name + "-content"
        var toCollapse = document.getElementById(collapseItem)
        var collapseHeading = toCollapse.previousElementSibling
        collapseHeading.classList.toggle("active")
    })

Answer 1

这是你想要的吗？

var myChart = document.getElementById("tt");
myChart.onmouseover = function(event){
        var collapseItem = event.target.tagName + "-content";

        var toCollapse = document.getElementById(collapseItem);
var collapseHeading = toCollapse.previousElementSibling;
        collapseHeading.classList.toggle("active");

}

#tt{
height: 40px;
width: 40px;
background-color: red;
}

.active{
height: 50px;
width: 50px;
background-color: green;
}

<div id="tt">
<div id="prev">
</div>

<div id="DIV-content">
</div>
</div>

Answer 2

您可以收听 mouseout 事件（取自 this post）

function toggleActiveClass(params){
    var collapseItem = params.name + "-content"
    var toCollapse = document.getElementById(collapseItem)
    var collapseHeading = toCollapse.previousElementSibling
    collapseHeading.classList.toggle("active")
}

myChart.on('mouseover', toggleActiveClass);
myChart.on('mouseout', toggleActiveClass);

Answer 3

您需要使用“mouseover”和“mouseout”才能使切换或class addition/removal 正常工作。当前，当您的光标离开时，没有删除 class.

的功能

function toggleActiveClass(params) {
    var collapseItem = params.name + "-content"    
    var toCollapse = document.getElementById(collapseItem)
    var collapseHeading = toCollapse.previousElementSibling
    collapseHeading.classList.toggle("active")
}

myChart.on('mouseover', toggleActiveClass);
myChart.on('mouseout', toggleActiveClass);

如何 add/remove class 鼠标悬停在 JavaScript 上？

How to add/remove class on mouse hover in JavaScript?

javascript