こんにちは！

jQueryで.hover()を使っていたのですが、ふと.on()で.hover()を使うためにはどうやるのだろうか・・・と思って少し調べてみたので書いておきます。

.hover()を使ってみる

まずそもそも.hover()の使い方ですが、以下のような感じになります。

$('#sample1').hover(function(){
    $(this).hide(10);
}, function(){
    $(this).show(10);
});

$(‘#sample1’).hover(function(){ $(this).fadeOut(10); }, function(){ $(this).fadeIn(10); });

.on()で.hover()を書いてみる

それじゃぁ同じものを.on()で書いてみましょう。

$('#sample2').on({
    'mouseenter': function(){
        $(this).fadeOut(10);
    },
    'mouseleave': function(){
        $(this).fadeIn(10);
    }
});

$(‘#sample2’).on({ ‘mouseenter’: function(){ $(this).fadeOut(10); }, ‘mouseleave’: function(){ $(this).fadeIn(10); } });

はいこれで出来ました！一丁上がり〜〜

全く関係ないですが今日この本買ってうきうき気分です