Jquery on hover not functioning

Question

I'm changing my codes to be compatible with jQuery 1.8 and I'm stuck with this hover which doesn't work. When I used then same thing with a click it worked. Here is my code, can anyone tell me where I'm going wrong?

$(document).on('hover', '.top-level', function (event) {
  $(this).find('.actionfcnt').show();
  $(this).find('.dropfcnt').show();
}, function () {
  $(this).find('.dropfcnt').hide('blind', function () {
    $('.actionfcnt').hide();
  });
});

What happens using "mouseover" instead of "hover"? – Chris Dixon Sep 04 '12 at 09:14 — Chris Dixon, Sep 04 '12 at 09:14

score 75 · Accepted Answer · answered Sep 04 '12 at 09:16

75

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.

Source: http://api.jquery.com/on/#additional-notes

That pretty much says it all, you cant use "hover" for that:

$(document).on('mouseenter','.top-level', function (event) {
    $( this ).find('.actionfcnt').show();
    $( this ).find('.dropfcnt').show();
}).on('mouseleave','.top-level',  function(){
    $( this ).find('.dropfcnt').hide('blind', function(){
        $('.actionfcnt').hide();
    });
});

answered Sep 04 '12 at 09:16

nbrooks

18,126
5
54
66

suppose there is a ajax call and the content of .top-level is replaced with new then also this mouseenter would work? – Param Veer Sep 04 '12 at 09:27
@param Yes this will work fine, this syntax still fully supports delegated events (events triggered by elements which weren't in DOM at time of function def). This will accomplish what you want for dynamically generated elements. – nbrooks Sep 04 '12 at 09:29
thanks you for the answer :) just checked it using dynamic content , its working perfect – Param Veer Sep 04 '12 at 09:53
@ParamVeer Glad it was useful! :) – nbrooks Sep 04 '12 at 09:55
This thing was burning my head for days, i was 100% that my code was working and it did when I replaced "hover" with mouseenter. I still don't get why they removed when they could just improve the name or at least throw a damn error. Anyway Thanks a lot man! – John M. Apr 04 '21 at 13:23

score 11 · Answer 2 · answered Sep 04 '12 at 09:16

11

there is no "hover" event. there is .hover() function that takes 2 callbacks (as in your example).

answered Sep 04 '12 at 09:16

Dziad Borowy

12,368
4
41
53

2

Imagine if all answers could be this concise and straight to the point. Great job! – Operator Jul 07 '17 at 05:42

score 5 · Answer 3 · edited Sep 04 '12 at 09:44

.on function has only 3 parameters : http://api.jquery.com/on/

If you don't need your handlers be bound to dynamically added elements as well, then you may use the good old hover function with 2 event handlers.

$('.top-level').hover(function (event) { 
  $(this).find('.actionfcnt').show();
  $(this).find('.dropfcnt').show();
}, function (event) {   
  $(this).find('.dropfcnt').hide('blind', function(){
    $('.actionfcnt').hide();
  });
});

By the way, $(selector).hover(handlerIn, handlerOut) is shorthand for $(selector).mouseenter(handlerIn).mouseleave(handlerOut);.

If you need to, then use on for mouseenter and mouseleave events:

$(document).on('mouseenter', '.top-level', function (event) { 
  $(this).find('.actionfcnt').show();
  $(this).find('.dropfcnt').show();
}).on('mouseleave', '.top-level', function (event) {   
  $(this).find('.dropfcnt').hide('blind', function(){
    $('.actionfcnt').hide();
  });
});

thanks i appreciate your answer and @nbrooks answer both . both are correct , thanks for such detail explanation — Param Veer, Sep 04 '12 at 09:37

score 5 · Answer 4 · answered Sep 04 '12 at 09:22

Try:

$(".top-level").on({
    mouseenter: function (event) {
        $( this ).find('.actionfcnt').show();
        $( this ).find('.dropfcnt').show();
    },
    mouseleave: function (event) {
        $( this ).find('.dropfcnt').hide('blind', function(){
            $('.actionfcnt').hide();
        });
    }
});

OR

$(".top_level").on("hover", function(event) {
  if(event.type == "mouseenter") {
    $( this ).find('.actionfcnt').show();
    $( this ).find('.dropfcnt').show();
  }
  else if (event.type == "mouseleave") {
    $( this ).find('.dropfcnt').hide('blind', function(){
        $('.actionfcnt').hide();
    });
  }
});

score 1 · Answer 5 · answered Sep 04 '12 at 09:16

Try

$('.top-level').hover(function (event) {
        $( this ).find('.actionfcnt').show();
        $( this ).find('.dropfcnt').show();
}, function(){
        $( this ).find('.dropfcnt').hide('blind', function(){
            $('.actionfcnt').hide();
        });
});

Jquery on hover not functioning

5 Answers5

Linked