2

我在使用此布局时遇到了一些问题，并且在悬停时显示的链接会一直显示！

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

<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 集成到该片段中（或者可能更好，我可能已经忘记了）进入这样的情况？

非常感谢！

4

1 回答 1

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);
});
于 2010-07-18T20:37:19.683 回答