Question

我有一个<div>，我想在悬停时切换它的类。

这是我的代码：

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

我知道我的html或css没有问题。只是我必须改变并用click代替，但我不知道是什么。

请帮助!!

Answer 1

Hover事件被称为＆＃34; mouseenter＆＃34;而不是＆＃34;点击＆＃34;。

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

（另见this Fiddle）

如何在html中使用纯JavaScript来切换类

2 个答案: