it-swarm.com.de

Wie man die Klasse mit reinem Javascript in HTML umschaltet

Ich habe ein <div>, und ich möchte seine Klassen beim Schweben umschalten.

Hier ist mein Code:

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

Ich weiß, dass es in meinem HTML oder CSS kein Problem gibt. Es ist nur so, dass ich etwas ändern und an die Stelle von click setzen muss, aber ich weiß nicht was.

Bitte helfen Sie!

43
user2906766

Das Hover-Ereignis heißt "mouseenter" anstelle von "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>
47
Tom Chung

Während Tom Chung s Ansatz definitiv funktioniert, ist es besser, mouseenter und mouseleave ihr eigener Handler:

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>

(Siehe auch diese Geige )

8
John Slegers