Como activar ou desactivar a classe usando javascript puro em html

Question

Como activar ou desactivar a classe usando javascript puro em html

eu tenho um {[[1]}, e eu quero alternar suas classes em hover.

Aqui está o meu código:

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

Eu sei que não há nenhum problema no meu html ou css. É que eu tenho que mudar e colocar algo no lugar de click, mas eu não sei o quê.

Por favor, ajudem-me!!

35

html css javascript hover toggle

Author: John Slegers, 2013-11-30

Source

2 answers

score 39 · Answer 1

Hover event is called " mouseenter "instead of"click".

<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>

score 7 · Answer 2

While Tom Chung'abordagem definitivamente funciona, é melhor dar - mouseenter e mouseleave seu próprio manipulador :

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>

Este Violino)