off hover jquery using .on()

Question

I know that the hover method in query allows you to specify what happens when a user hovers and what happens when a user un-hovers. However, I am using .on() to handle the hover event because the content is dynamically created. How can I return it to its original state when the user un-hovers. Here is my code, I have tried .off() but it has not given the results I'm looking for:

$('tr').on('hover', 'td', function(){
    $(this).fadeTo(500, 1 )    
})

Here's what I've tried:

$('tr').off('hover', 'td', function(){
    $(this).fadeTo(500, .85 )         
})

thanks.

Answer 1

If you want to use .on(), the events to handler are "mouseenter" and "mouseleave". You can do it with a single call:

$('tr').on({
  mouseenter: function() {
    $(this).fadeTo(500, 1); // or whatever
  },
  mouseleave: function() {
    $(this).fadeTo(500, 0.85); // or whatever
  }
}, 'td');

You can also do this with CSS, using the ":hover" pseudo-class. That'll work even in older versions of IE, to some extent. You can animate the changes too.

Answer 2

This is what you need

$('tr').on('mouseenter', 'td', function(){

    $(this).fadeTo(500, 1 )

}).on('mouseleave', 'td', function(){

    $(this).fadeTo(500, .85 )


})