将 Hoverintent 应用于 Jquery Hover

发布于 2024-09-10 06:11:01 字数 1038 浏览 5 评论 0原文

我对此布局遇到了一些问题，并且悬停时显示的链接保持显示！

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

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

非常感谢！

原文

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!

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

鞋纸虽美，但不合脚ㄋ〞 2024-09-17 06:11:01

您仍然可以在该上下文中使用 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);
});

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);
});

回复收藏 0 原文

~没有更多了~