0

lo que queria saber es si hay alguna manera de saber cuanto algun elemento esta en hover, me serviría mucho para remover clases o agregar clases en JS, ya que algunas cosas se desactivan cuando no esta en hover mi div.

Logre hacer algo pero se desactiva con el tiempo y para ativarlo de nuevo le tienes que vovler a clickear:

´´´

function prueba(carta = card) {
document.querySelectorAll(".cajaGrafico").forEach(item => {
    item.classList.remove('pointerEvents');
});

setTimeout(function() {
    document.querySelectorAll(".cajaGrafico").forEach(item => {
        item.classList.add('pointerEvents');
    });
console.log('se acabo el tiempo');
}, 20000 );

}

.card:hover {
    z-index: 8;
    transform: scale(1.12);
    box-shadow: 9px 40px 30px rgba(0, 0, 0, 0.5);
    background-color: #292929;
}  
´´´
3
  • Probablemente puedas usar el evento de ratón "onmouseover" y "onmouseout" Commented el 19 may. 2022 a las 21:17
  • Lo que buscas es que cuando el div se le haga hover se le ponga la clase y que no se le vuelva a eliminar luego de quitar el hover?
    – ayaleil
    Commented el 19 may. 2022 a las 21:17
  • lo que busco es que me haga como una "Bandera" si esta lo esta en hover me haga 1 y si le quito el hover me haga 0, para poder hacer un if que agregue o me quite clases
    – tryPlease
    Commented el 19 may. 2022 a las 21:21

1 respuesta 1

0

Puedes usar los eventos mouseenter - mouseover y mouseleave - mouseout, con eso le agregas la clase dependiendo el evento que quieras, mira el ejemplo:

let test = document.getElementById("test");

test.addEventListener("mouseover", function( event ) {
  event.target.style.background = "purple";
});


test.addEventListener("mouseout", function( event ) {
  event.target.style.background = "orange";
});
#test{
width:20px;
height: 20px;
background: red;
}
<div id=test>

</div>

o tambien así:

    let open = true;

    function change() {
            document.getElementById("test").className = "closed";
            open = true; 
    }
    function change2() {
    document.getElementById("test").className = "open";
            open = false;
    }
p.closed {
    display: none;
}
p.open {
    display: block;
}
<div onmouseover="change()" onmouseout=change2()>Mostar/no mostrar</div>

<p id="test" class="open">Esto se mostrara dependiendo la clase</p>

1
  • Gracias por las respuesta! me sirvio.
    – tryPlease
    Commented el 20 may. 2022 a las 14:39

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.