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

Question

I want to add class as I hover over an item and remove it as soon as the hover is removed in JavaScript. For now, my code is not removing the class until I hover over that item again.

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

@TheKNVB I'm using a chart library and I want to highlight a specific text on my page as I hover the specific item in the graph. — Nik
– Nik, Commented Jun 2, 2022 at 5:59
You have to use mouseover as well as mouseout to make it work properly. myChart.on('mouseout', function(params){ var collapseItem = params.name + "-content" var toCollapse = document.getElementById(collapseItem) var collapseHeading = toCollapse.previousElementSibling collapseHeading.classList.toggle("active") // collapseHeading.classList.remove("active") }) — Seerat Ahmed
– Seerat Ahmed, Commented Jun 2, 2022 at 6:07

Noa · Accepted Answer · 2022-06-02 06:06:28Z

2

is this you want?

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>

answered Jun 2, 2022 at 6:06

Noa

1,21614 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

amir_barak · Accepted Answer · 2022-06-02 06:30:33Z

1

you can listen to mouseout event (taken from 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);

edited Jun 2, 2022 at 6:30

answered Jun 2, 2022 at 6:13

amir_barak

944 bronze badges

3 Comments

Seerat Ahmed Over a year ago

Just need to remove the extra ')' from the end.

Nik Over a year ago

It worked but slight issue is that sometime mouseover isn't working on adjacent items in chart.

amir_barak Over a year ago

can you share an example?

Seerat Ahmed · Accepted Answer · 2022-06-02 06:21:05Z

1

You need to use "mouseover" as well as "mouseout" to make the toggle or class addition/removal work properly. Currently when your cursor leave there no function to remove the 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);

answered Jun 2, 2022 at 6:21

Seerat Ahmed

2773 silver badges14 bronze badges

Collectives™ on Stack Overflow

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

3 Answers 3

Comments

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related