Using jQuery on() Instead of hover()

Question

Per the standards, I'm trying to use jQuery's on() method as much as possible for my event handlers. Instead of hover(), I tried using on('hover') but it does not work. What can I do to make this bit of code work with on() instead of hover()? Is there a list of events I can see that work with the on() method?

$(document).ready(function(){
    $('#navigation li').on('hover', function(){
        $(this).animate({
            paddingLeft: '+=15px'
        }, 200);
    }, function(){
        $(this).animate({
            paddingLeft: '-=15px'
        }, 200);
    });
});

As far as what events it supports, that is implemented by the browser. — Kevin B, Jan 08 '16 at 19:20
Incidentally, this could easily be replaced with pure [CSS transitions](http://stackoverflow.com/questions/8246843/css3-animate-out-of-hover?rq=1). — Blazemonger, Jan 08 '16 at 19:31

score 6 · Accepted Answer · answered Jan 08 '16 at 19:23

$('div')
  .on('mouseenter', function(){ $(this).addClass('red'); })
  .on('mouseleave', function(){ $(this).removeClass('red'); });

div {
  min-height: 50px;
  border: 1px solid #000;
}

.red { background-color: #F00; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div></div>

score 1 · Answer 2 · answered Jan 08 '16 at 19:24

Well hover take two functions. On takes one.

$(document).ready(function(){
    $('#navigation li').on('mouseenter', function(){
        $(this).animate({
            paddingLeft: '+=15px'
        }, 200);
    });
    $('#navigation li').on('mouseleave', function(){
        $(this).animate({
            paddingLeft: '-=15px'
        }, 200);
    });
});

score 0 · Answer 3 · answered May 28 '22 at 06:51

Well, I'm late to the party but I think this should do

$(document).ready(function(){
$('#navigation li').on('mouseover', function(){
    $(this).animate({
        paddingLeft: '+=15px'
    }, 200);
}, function(){
    $(this).animate({
        paddingLeft: '-=15px'
    }, 200);
});

});

Using jQuery on() Instead of hover()

3 Answers3