マウスが乗ったときの動作
マウスが外れました
<div id="test">ここにマウスを乗せたり外したりしてください</div>
const element = document.getElementById('test')
element.addEventListener('mouseover', ()=>{
element.textContent = 'マウスが乗っています';
});
element.addEventListener('mouseout', ()=>{
element.textContent = 'マウスが外れました';
});
上の例では要素にマウスを乗せたとき、外した時で文字が変わるようになっています。
は以下と同じ内容になります。
addEventListenerの第1引数を'mouseover'とするとマウスが乗ったとき、'mouseout'とするとマウスが外れた時の処理となります。
element.addEventListener('mouseover', ()=>{
element.textContent = 'マウスが乗っています';
});
element.textContent = 'マウスが乗っています';
});
は以下と同じ内容になります。
element.addEventListener('mouseover', function (){
element.textContent = 'マウスが乗っています';
});
element.textContent = 'マウスが乗っています';
});
addEventListenerの第1引数を'mouseover'とするとマウスが乗ったとき、'mouseout'とするとマウスが外れた時の処理となります。