using on() with hover - jQuery

Question

This is what I have:

$('#blah').hover(function(){
    $('etc').show();
}, function(){
    $('etc').hide();
});

This works just fine, now I want the exact above code working live with on() method:

$('#blah').on('hover', function(){
    $('#etc').show();
}, function(){
    $('#etc').hide();
});

But this is not working, anybody knows why? but also this works:

$('#blah').on('hover', function(){
    $('#etc').show();
});

When I'm using on() method, the callback function is not working, so I'm using mouseover() and mouseleave() with on() and it's working, I just wanted to know why hover callback is not working with on(), that's so simpler than using 2 events....

Thanks

Ravi Gadag · Accepted Answer · 2013-03-01 09:54:22Z

3

from Jquery docs. Jquery on

Deprecated as of jQuery 1.8: The name "hover" used as a shorthand for the string "mouseenter mouseleave". It attaches a single event handler for those two events, and the handler must examine event.type to determine whether the event is mouseenter or mouseleave. Do not confuse the "hover" pseudo-event-name with the .hover() method, which accepts one or two functions.

$("div.test").on({
  mouseenter: function(){
    $(this).addClass("inside");
  },
  mouseleave: function(){
    $(this).removeClass("inside");
  }
});

answered Mar 1, 2013 at 9:54

Ravi Gadag

15.9k5 gold badges60 silver badges85 bronze badges

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

Comments

Taufik Nurrohman · Accepted Answer · 2013-03-01 10:05:39Z

From the JQuery source code, hover is not included in the event list that triggered leading to JQuery .on()

jQuery.each( ("blur focus focusin focusout load resize scroll unload click dblclick " +
    "mousedown mouseup mousemove mouseover mouseout mouseenter mouseleave " +
    "change select submit keydown keypress keyup error contextmenu").split(" "), function( i, name ) {

    // Handle event binding
    jQuery.fn[ name ] = function( data, fn ) {
        return arguments.length > 0 ?
            this.on( name, null, data, fn ) :
            this.trigger( name );
    };
});

It is because .hover() is just a shortcut for JQuery .mouseenter() and .mouseleave()

jQuery.fn.hover = function( fnOver, fnOut ) {
    return this.mouseenter( fnOver ).mouseleave( fnOut || fnOver );
};

I hope this brief explanation provides little guidance.

Community · Accepted Answer · 2017-05-23 12:12:58Z

1

Use mouseenter and mouseleave for hover. Check using hover with on here.

$("#blah").on(
{
    mouseenter: function() 
    {
        //stuff to do on mouseover
    },
    mouseleave: function()
    {
        //stuff to do on mouseleave
    }
});

Use toggle to show / hide,

$('#blah').on('hover', function(){
    $('#etc').toggle();
});

edited May 23, 2017 at 12:12

CommunityBot

11 silver badge

answered Mar 1, 2013 at 9:51

Adil

148k25 gold badges217 silver badges207 bronze badges

2 Comments

behz4d Over a year ago

not relevant, I already found a solution to the problem, I just wanted to know why it's not working, but a good point, thanks

Dipesh Parmar Over a year ago

@behz4d it was not working because when you use hover using on it only has single call back see my answer..

complex857 · Accepted Answer · 2013-03-01 09:52:02Z

1

It's because hover is not really a browser event, in fact its just a shorthand for calling

 $(selector).mouseenter(handlerIn).mouseleave(handlerOut);

Using with the .on('hover') form have been deprecated as of version 1.8.

answered Mar 1, 2013 at 9:52

complex857

20.9k6 gold badges54 silver badges56 bronze badges

Comments

K D · Accepted Answer · 2013-03-01 09:50:26Z

0

use

 jQuery.on("hover","#blah", function..)

Or you can use toggle feature of jQuery too

answered Mar 1, 2013 at 9:50

K D

6,0091 gold badge25 silver badges36 bronze badges

1 Comment

Ravi Gadag Over a year ago

what's the differance ? you are passing a context to it.

Dipesh Parmar · Accepted Answer · 2013-03-01 09:51:06Z

0

Yes it will not work because when you use .on() with hover then hover event just have one call-back function instead you can use multiple events in .on()

Try

$("DOM").on({
    mouseenter: function() {
        // Handle mouseenter...
    },
    mouseleave: function() {
        // Handle mouseleave...
    }
});

answered Mar 1, 2013 at 9:51

Dipesh Parmar

27.3k8 gold badges65 silver badges92 bronze badges

Comments

EnterJQ · Accepted Answer · 2013-03-01 09:52:04Z

0

Use toggle()

$('#blah').on('hover', function(){
   $('#etc').toggle();
});

answered Mar 1, 2013 at 9:52

EnterJQ

1,0168 silver badges18 bronze badges

Collectives™ on Stack Overflow

using on() with hover - jQuery

7 Answers 7

Comments

Comments

2 Comments

Comments

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

Comments

Comments

2 Comments

Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related