こんにちは、webエンジニアのtakaです。
今回は、jQueryを使ってhtml要素をhoverした時にイベントを実行する方法を解説していきます。
手短に要点を押さえていきましょう。
hoverした時にイベントを実行する方法
hoverした時にイベントを実行するには、jQueryのhover()メソッドを利用します。
使い方は以下のように記載します。
// JavaScript
$(function(){
$('#drop-down-menu').hover(
function() {
// マウスカーソルが重なった時の処理
},
function() {
// マウスカーソルが離れた時の処理
}
);
});hover関数の第一引数にマウスカーソルが重なった時の処理を、第二引数にマウスカーソルが離れた時の処理を記載します。
hoverの第二引数がない場合
以下のようにhover関数の第二引数がない場合の挙動は気をつける必要があります。
第二引数がない場合、設定した処理がマウスカーソルが重なった時、離れた時両方で実行されます。
マウスカーソルが重なった時に処理が行われ、マウスカーソルが離れた時何も実行されないではないので気を付けましょう。
// JavaScript
$(function(){
$('#action').hover(
function() {
// マウスカーソルが重なった時とマウスカーソルが離れた時に実行される処理
}
);
});