0
332
Views¿Cómo agregar/eliminar clases al pasar el mouse en JavaScript?
Quiero agregar una clase cuando paso el mouse sobre un elemento y lo elimino tan pronto como se elimine el desplazamiento en JavaScript. Por ahora, mi código no eliminará la clase hasta que vuelva a colocar el cursor sobre ese elemento.
myChart.on('mouseover', function(params){ var collapseItem = params.name + "-content" var toCollapse = document.getElementById(collapseItem) var collapseHeading = toCollapse.previousElementSibling collapseHeading.classList.toggle("active") })
·
Juan Pablo Isaza
3 answers
Answer question0
¿es esto lo que quieres?
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>
·
Juan Pablo Isaza
Report
0
puedes escuchar el evento mouseout (tomado de esta publicación )
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);
·
Juan Pablo Isaza
Report
0
Debe usar "mouseover" y "mouseout" para que la alternancia o la adición/eliminación de clases funcionen correctamente. Actualmente, cuando su cursor sale, no hay función para eliminar la clase.
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);
·
Juan Pablo Isaza
Report
Answer question