如何在html中使用純JavaScript來切換類

Question

我有一個<div> ，我想在懸停時切換它的類。

這是我的代碼：

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

我知道我的HTML或CSS沒有問題。 只是我必須改變並放置一些代替click東西，但我不知道是什么。

請幫忙！！

Answer 1

懸停事件稱為“mouseenter”而不是“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>

Answer 2

雖然Tom Chung的方法確實有效，但最好給mouseenter和mouseleave自己的處理程序：

 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> 

（另見小提琴 ）