javascript - 将 Hoverintent 应用于 Jquery 悬停

Question

我在使用此布局时遇到了一些问题，并且在悬停时显示的链接保持显示状态!

这是显示数据的表格行示例...

<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>

还有 javascript!

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

如您所见，它是这样设置的，因此每一行的“数据”链接都显示设置为删除该行的 div 链接。我以前使用过 hoverIntent，但是，它似乎并没有按照我尝试使用它的方式工作(如下)。

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

但是，这显示所有行都同时悬停，而不是像第一个片段那样一次悬停一个。

因此，在大量漫无目的的讨论之后归结为，如何将 hoverIntent 集成到该代码段(或者可能是更好的代码段，我可能已经忘记了)中，以实现这样的情况？

非常感谢!

Answer 1

您仍然可以在该上下文中使用 this，如下所示:

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

或者以与匿名函数完全相同的方式使用它:

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

它仍然是一个处理程序，this 仍将引用您悬停在/悬停的同一元素。在镜头中，只需使用 .hoverIntent()和你一样.hover() .为了避免动画排队，我推荐一个 .stop()对于快速悬停，像这样:

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