・jQueryでマウスホバーイベントってどう実装するの？
こんな疑問にお答えします。
ホバーしたら〇〇して、ホバーが外れたら〇〇をするという実装をしたいときありますよね。
でもjQueryではどう実装するんだ？と思うはず。
やり方は複数ありますが、簡単に実装可能です。
すぐにできるよ！
ということで、この記事では「マウスホバーイベントの実装方法」について解説していきます！
・マウスホバーイベントの実装方法【hover】
・マウスホバーイベントの実装方法【mouseenter,mouseleave】
目次
【jQuery】マウスホバーイベントの実装方法【hover編】
まずhoverを使ったやり方です。
書き方としてはこちら↓
$(function() {
$('.hoge').hover(
function(){
// ホバーした時のイベント
},
function(){
// ホバーが外れたときのイベント
}
);
});上関数部分にホバー時のイベントを記述。
下関数部分にホバーが外れたときのイベントを記述。
See the Pen ➀：ホバーイベント by jito-coder (@jito-coder) on CodePen.
ホバーすると背景色が変わるかと思います。
<div class="box">
hoverしてみて
</div>$(function() {
$('.box').hover(
function(){
$(this).css('background-color','#ccc');
},
function(){
$(this).css('background-color','#000066');
}
);
});注意点として、今回の例ではホバーする前からcssで背景色を設定しています。
そうしないとホバーするまで、背景色がついていない状態になるため。ホバー前の指定にも注意して実装すべし！
ちなみにホバーが外れたときのイベントを記述しないと、ホバーした時のイベントが維持されます。
こんな感じに↓
See the Pen ➂：ホバーイベント by jito-coder (@jito-coder) on CodePen.
$(function() {
$('.box').hover(
function(){
$(this).css('background-color','#ccc');
},
);
});ホバーを外しても背景色が「#ccc」のままですよね！
ちなみに実際にhoverイベントを使った実装がこちら↓
【jQuery】ドロップダウンメニューの作り方３選【ホバー・クリック】 【jQuery】マウスホバーイベントの実装方法【mouseenter,mouseleave編】
続いて「on()」イベント関数を使った場合の、マウスホバーイベント実装を紹介していきます。
使うのは「hover」ではなく、「mouseenter,mouseleave」です。
コードがこちら↓
$(function() {
$('.hoge').mouseenter(function(e) {
// ホバーした時のイベント
}),
$('.hoge').mouseleave(function(e) {
// ホバーが外れたときのイベント
})
});「mouseenter」がホバー時のイベント。
「mouseleave」がホバーが外れたときのイベントとなります。
See the Pen ➀：ホバーイベント by jito-coder (@jito-coder) on CodePen.
<div class="box">
hoverしてみて
</div>$(function() {
$('.box').mouseenter(function(e) {
$(this).css('background-color','#ccc');
})
$('.box').mouseleave(function(e) {
$(this).css('background-color','#000066');
})
});ホバーしたら背景色が変わるイベントが発生しますよね。
ちなみにホバーが外れたときという指定をしないと、ホバーした時のイベントがそのまま続きます。
先ほどのサンプルだと、背景色が変わったままになるということですね↓
See the Pen ➁：ホバーイベント by jito-coder (@jito-coder) on CodePen.
$(function() {
$('.box').mouseenter(function(e) {
$(this).css('background-color','#ccc');
})
});一度ホバーしたら、背景色が＃cccになり、ホバーが外れてもその色が持続しますよね。
【jQuery】マウスホバーイベントの実装方法【hover・mouseenter,mouseleave】：まとめ
- hoverを使うやり方と、on.mouseenter,mouseleaveなど複数ある
- ホバーが外れた後に指定をしないと、ホバーした時のイベントが持続する
マウスホバーイベントはよく使うので覚えておこう！
ちなみに実際にhoverイベントを使った実装がこちら↓
【jQuery】ドロップダウンメニューの作り方３選【ホバー・クリック】
