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

score 3 · Answer 1 · answered Mar 01 '13 at 09:54

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

score 2 · Accepted Answer · answered Mar 01 '13 at 10:05

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.

score 1 · Answer 3 · edited May 23 '17 at 12:12

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 '17 at 12:12

Community

1
1

answered Mar 01 '13 at 09:51

Adil

146,340
25
209
204

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 – behz4d Mar 01 '13 at 09:52
@behz4d it was not working because when you use hover using on it only has single call back see my answer.. – Dipesh Parmar Mar 01 '13 at 09:53

score 1 · Answer 4 · answered Mar 01 '13 at 09:52

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 01 '13 at 09:52

complex857

20,425
6
51
54

score 0 · Answer 5 · answered Mar 01 '13 at 09:50

0

use

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

Or you can use toggle feature of jQuery too

answered Mar 01 '13 at 09:50

K D

5,889
1
23
35

3

what's the differance ? you are passing a context to it. – Ravi Gadag Mar 01 '13 at 09:50

score 0 · Answer 6 · answered Mar 01 '13 at 09:51

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

score 0 · Answer 7 · answered Mar 01 '13 at 09:52

0

Use toggle()

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

answered Mar 01 '13 at 09:52

EnterJQ

1,014
8
18

using on() with hover - jQuery

7 Answers7

Linked

Related