如何在HTML中使用纯JavaScript切换类？

Question

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

这是我的代码：

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

我知道我的HTML或CSS没有问题。只是我需要更改并替换click，但我不知道应该放什么。

请帮忙！！

- user2906766

---

为什么不直接在CSS中使用:hover？更多信息请参见：http://www.w3.org/wiki/CSS/Selectors/pseudo-classes/:hover - msturdy

一个原因是这个 :) - Matt Lyons-Wood

Answer 1

Hover事件被称为"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>

- Tom Chung

---

дЅїз”Ё ID (#container) ж—¶пјЊдј з»џзљ„ getElementById() жЇ” querySelector() еї«иї‘10еЂЌгЂ‚ - Roko C. Buljan

请注意，.toggle()方法不支持IE9及以下版本。请参阅MDN文档中的classList。 - Bradley Flood

在某些极端情况下，JS更适合实现完整的跨浏览器兼容性。 - MaxRocket

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>

(另请参见这个Fiddle)

- John Slegers