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-link。我之前使用过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);
});

将Hoverintent应用于Jquery悬停

1 个答案: