Applying Hoverintent to a Jquery Hover

Question

Hello all!

I'm having some issues with this layout and having a link that displays on hover stay showing!

Here's a sample of the table row which is displaying the data...

<tr>
<td>
<div class="heightControl">
    <a href="#">data</a>
    <div class="logRemove"><a href="#" class="sremovelink"></a></div>
</div>
</td>
<td>12.14.09 / 12:38:00 AM</td><td>12.14.19 / 3:01:00 PM</td>
<td>Data</td>
</tr>

And the javascript!

$("tr a").hover(
  function(){$(this).siblings(".logRemove").fadeIn(100);},
  function(){$(this).siblings(".logRemove").fadeOut(100);}
);

As you can see it's set up like this so each row's 'data' link shows the div-link which is set up to remove that row. I have used hoverIntent previously, but, it doesn't seem to be working with the way I tried to use it (below).

function remove4Display(){
  $(".logRemove").fadeIn(100);
}
function remove4Hide(){
  $(".logRemove").fadeOut(100);
}
$("tr a").hoverIntent(remove4Display, remove4Hide);

But, that shows all rows being hovered at once, not one at a time like the first snippet.

So after the large amount of rambling it boils down to, how does one integrate hoverIntent into that snippet (or perhaps one even better, that I may have forgotten) into a situation like this?

Thanks much!

Answer 1

You can still use this in that context, like so:

function remove4Display(){
  $(this).siblings(".logRemove").fadeIn(100);
}
function remove4Hide(){
  $(this).siblings(".logRemove").fadeOut(100);
}
$("tr a").hoverIntent(remove4Display, remove4Hide);

Or use it the exact same way with anonymous functions:

$("tr a").hoverIntent(function() {
  $(this).siblings(".logRemove").fadeIn(100);
}, function() {
  $(this).siblings(".logRemove").fadeOut(100);
});

It's still a handler, and this will still refer to the same element you're hovering in/out of. In shot, just use .hoverIntent() the same way you would .hover(). To avoid the animation queue up though, I recommend a .stop() for fast hovers, like this:

$("tr a").hoverIntent(function() {
  $(this).siblings(".logRemove").stop().fadeIn(100);
}, function() {
  $(this).siblings(".logRemove").stop().fadeOut(100);
});