CODEWITHSUNDEEP
javascripthtmljqueryhoverjquery-events
Param Veer
Param Veer

Reputation: 786

Jquery on hover not functioning

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

Upvotes: 40

Views: 41994

Answers (5)

Danil Speransky
Danil Speransky

Reputation: 30473

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

Upvotes: 5

Sudhir Bastakoti
Sudhir Bastakoti

Reputation: 100205

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

Upvotes: 5

nbrooks
nbrooks

Reputation: 18233

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

Upvotes: 77

Florian Bauer
Florian Bauer

Reputation: 636

Try

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

Upvotes: 1

Dziad Borowy
Dziad Borowy

Reputation: 12589

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

Upvotes: 12

Related Questions