Off hover with .on ()

Question

I know that the guidance method in the request allows you to specify what happens when the user freezes and what happens when the user freezes. However, I use .on () to handle the hover event, because the content is dynamically generated. How can I return it to its original state when the user does not freeze. Here is my code, I tried .off (), but it did not give the results I'm looking for:

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

Here is what I tried:

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

thanks.

Answer 1

If you want to use .on() , the events for the handler are "mouseenter" and "mouseleave". You can do this 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 using CSS using the ": hover" pseudo-class. This will work even in older versions of IE, to some extent. You can also animate changes.

Answer 2

This is what you need

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

Answer 3

You can do this in pure CSS , but here you go:

 $('tr').on('mouseenter mouseleave', 'td', function( e ){ $(this).fadeTo(500, e.type=="mouseenter" ? 1 : 0.85 ); }); 

Using hover:

 $('tr td').hover(function( e ){ $(this).fadeTo(500, e.type=="mouseenter" ? 1 : 0.85 ); }); 

Tip:
.on('hover' does not bind direct links to mouseenter mouseleave events separately, as using the Method $(selector).hover(handlerIn, handlerOut) , but simply the hover event.

To renew:

 $('tr').on('hover', 'td', function( e ){ // no separated "mouseenter" and no "mouseleave" e.type reference here :( // just "hover" event }); $('tr').on('mouseenter mouseleave', 'td', function( e ){ // e.type are defined :) }); $('tr').on('mouseenter', 'td', function( e ){ // function only for 'mouseenter' event }).on('mouseleave', 'td', function(){ // function only for 'mouseleave' event }); $('tr td').hover(function( e ){ // e.type "mouseenter" and "mouseleave" are in event reference :) }); // $("tr td").hover(handlerIn, handlerOut) $('tr td').hover(function(){ // Method default // e.type reference == "mouseenter" }, function(){ // Method default // e.type reference == "mouseleave" }); 

Now it depends on whether you need to delegate your events to elements using .on() (dynamically created elements) or .hover() , suitable only for your needs.

As for the .off() method, you can take a closer look at what it does: here
Basically, if at some point you want to remove any additional deletion of an event into an element, than use .off ():

 $('#selector').on('click', 'button', function(){ // Function callback: alert('I will alert only once cause of off()'); $('#selector').off('click', 'button'); }); 

Answer 4

hover is not an event, it is a shortcut for mouseenter and mouseleave event handlers

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

Answer 5

 $('.element').hover( function () { $(this).fadeTo(500, 1); }, function () { $(this).fadeTo(500, .85); } );