web-dev-qa-db-fra.com

Comment changer de classe en utilisant du javascript pur en HTML

J'ai un <div>, et je veux basculer ses classes en survol.

Voici mon code:

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

Je sais qu'il n'y a pas de problème dans mon code HTML ou CSS. C'est juste que je dois changer et mettre quelque chose à la place de click, mais je ne sais pas quoi.

S'il vous plaît aider!

javascripthtmlcsshovertoggle
43
user2906766

L'événement de survol s'appelle "mouseenter" au lieu de "cliquer".

<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>
47
Tom Chung

Bien que l'approche de Tom Chung fonctionne définitivement, il vaut mieux donner mouseenter et mouseleave leur propre gestionnaire:

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>

(voir aussi ce violon )

8
John Slegers