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. — user400654
– user400654, Commented Jan 8, 2016 at 19:20
Incidentally, this could easily be replaced with pure CSS transitions. — Blazemonger
– Blazemonger, Commented Jan 8, 2016 at 19:31

Taplar · Accepted Answer · 2016-01-08 19:23:15Z

6

$('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>

answered Jan 8, 2016 at 19:23

Taplar

25k4 gold badges24 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

George Houpis · Accepted Answer · 2016-01-08 19:24:22Z

1

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);
    });
});

answered Jan 8, 2016 at 19:24

George Houpis

1,7291 gold badge9 silver badges5 bronze badges

Comments

Powerstone · Accepted Answer · 2022-05-28 06:51:42Z

0

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);
});

});

answered May 28, 2022 at 6:51

Powerstone

1064 bronze badges

Collectives™ on Stack Overflow

Using jQuery on() Instead of hover()

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related