jQueryのhoverイベントを使ってマウス関連の処理を行う方法

今回はjQueryのhoverイベントを使ってマウスが乗った時や離れた時の処理を行う方法を紹介します。

 

hover()とは?

簡単にいうとCSSの:hoverと同じようなものと考えていいでしょう。

名前の通り、マウスが乗った時や離れた時に処理を行うことができるメソッドです。

jQueryにはmouseenter()とmouseleave()というメソッドも存在しますが、hover()はこれらを1つにまとめたようなものです。

 

hover()の使い方

基本的な書き方は、「$(.selector).hover(関数1, 関数2);」という感じで、関数1はマウスがホバーした時、関数2はマウスが離れた時の処理を記述します。

$('button').hover(
    function() {
 
        //マウスカーソルが重なった時の処理
 
    },
    function() {
 
        //マウスカーソルが離れた時の処理
 
    }
);

 

試しに簡単な処理を書いてみます。

以下のコードはボタンに対してマウスがホバーした時に背景色を青に変更し、マウスが離れた時は赤に変更するというものです。

$('button').hover(
    function() {
        
        //マウスカーソルが重なった時の処理
        $('button').css('background-color', '#00f');
        
    },
    function() {
        
        //マウスカーソルが離れた時の処理
        $('button').css('background-color', '#f00');
        
    }
);

 

2つ目の関数を省略する

hover()は実は2つ目の関数を省略することができます。

2つ目の関数を省略した場合、マウスがホバーした時と離れた時のどちらも関数1が実行されます。CSSの:hoverと全く同じですね。

 

また、こんな処理を行うこともできます。

$('button').hover(
    function() {
        
        //カラーパレットの用意
        var colors = ['#f00', '#0f0', '#00f', '#f0f', '#0ff', '#ff0'];
 
        //乱数を生成する
        var rnd = Math.floor(Math.random() * colors.length);
        
 
        //背景色を変更する
        $('button').css('background-color', colors[rnd]);
        
    }
);

 

上記のコードではマウスがホバーした時と離れた時に同じ関数が実行されます。

つまり、マウスがホバーした時と離れた時で毎回背景色が変わるということですね。

 

hover()を解除するときは注意

jQueryにはイベントを解除するためのoff()メソッドが用意されていますが、以下のように書いてもhover()を解除することはできません。

$('button').off('hover');

 

あくまでもhoverはmouseennter/mouseleaveを1つにまとめたようなメソッドなので、上記のように書いてもダメです。

hoverを解除するには以下のように書くのが正解です。

$('button').off('mouseenter mouseleave');

 

off()メソッドの引数にmouseenterとmouseleaveを渡すようにしましょう。

 

on()メソッドで書き換え

hover()メソッドはmouseenterとmouseleaveをまとめたようなメソッドなので、on()イベントを使って書き換えもできます。

    $('button').on({
        'mouseenter': function() {
 
            console.log('マウスが重なった!');
 
        },
        'mouseleave': function() {
 
            console.log('マウスが離れた!');
 
        }
    });

 

見た目はこっちの方がわかりやすいですが、コードの量は数文字くらいhover()の方が短いですね。。

好きな方を使えばokだと思います。

 

hover()が効かない場合は

hover()はjQueryによって後から追加された要素より前に記述しても効きません。

まだ追加されていない要素にhover()で処理を書いても意味がないんですね。

以下のようなコードだとhover()が効かないことになります。

('button').hover(
    function() {
        console.log('重なった');
    },
    function() {
        console.log('離れた');
    }
)
 
//hoverは効かない
$('body').append('<button>ボタン</button>');

 

上記のコードではまだ追加されていない要素に対してhover()を指定して処理を行っています。まだ要素は追加されていないわけなので、当然処理は正常に行われないことになります。

 

ただし、on()メソッドを使えばまだ追加されていない要素に対しても処理を行うことができます。

$('body').on({
    mouseenter: function() {
        console.log('重なった');
    },
    mouseleave: function() {
        console.log('離れた');
    }
}, 'button')
 
//処理される
$('body').append('<button>ボタン</button>');

 

on()メソッドの最後の引数に対象の要素を指定することで、まだ追加されていない要素に対しても処理を行うことができます。便利。