web-dev-qa-db-ja.com

HTMLで純粋なJavaScriptを使用してクラスを切り替える方法

<div>、ホバー時にクラスを切り替えたい。

ここに私のコードがあります：

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

私は私のHTMLやCSSに問題がないことを知っています。 clickの代わりに何かを変更して配置する必要があるだけですが、何がわからないのです。

助けてください！！

javascripthtmlcsshovertoggle
43
user2906766

ホバーイベントは、「クリック」ではなく「マウス入力」と呼ばれます。

<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

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 も参照）

8
John Slegers