<div>
、ホバー時にクラスを切り替えたい。
ここに私のコードがあります:
function a(){
this.classList.toggle('first');
this.classList.toggle('sec');
}
document.querySelector('#container').addEventListener('click', a );
私は私のHTMLやCSSに問題がないことを知っています。 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 のアプローチは間違いなく機能しますが、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 も参照)