modificar - Cómo cambiar la clase usando javascript puro en html

replace html javascript

Question

Tengo un <div> , y quiero alternar sus clases en vuelo estacionario.

Aquí está mi código:

function a(){
    this.classList.toggle(''first'');
    this.classList.toggle(''sec'');
}
document.querySelector(''#container'').addEventListener(''click'', a );

Sé que no hay ningún problema en mi html o css. Es solo que tengo que cambiar y poner algo en lugar de click , pero no sé qué.

¡¡Por favor ayuda!!

Answer 1

El evento de desplazamiento se llama "mouseenter" en lugar de "hacer clic".

<script type="text/javascript">
    function a(){
        this.classList.toggle(''first'');
        this.classList.toggle(''sec'');
    }
    document.querySelector(''#container'').addEventListener(''mouseenter'', a )
    document.querySelector(''#container'').addEventListener(''mouseleave'', a )
</script>

Answer 2

Si bien el enfoque de definitivamente funciona, es mejor dar mouseenter y mouseleave su propio controlador:

var container = document.querySelector(''#container'');

container.addEventListener(''mouseenter'', function(){
        this.classList.remove(''first'');
        this.classList.add(''second'');
})
container.addEventListener(''mouseleave'', function(){
        this.classList.add(''first'');
        this.classList.remove(''second'');
})

.first {
    background: green;
}

.second {
    background: orange;
}

<div id="container" class="first">
    TEST
</div>

(vea también este violín )