jquery - 使用jquery在照片顶部显示可点击的箭头(悬停)

Question

我有一张照片，当用户将鼠标悬停在它上面时，我会在照片顶部显示(使用绝对定位)2 个箭头，一个用于进入上一张照片，一个用于进入下一张照片。这是到目前为止的代码...

$('a.large_product_photo').hover(
  function () {
    $('.arrow').fadeIn(300);
  },
  function () {
    $('.arrow').fadeOut(300);
  }
);

问题是，由于当我将鼠标悬停在箭头上进行单击时，箭头位于照片顶部，因此它们消失了，因为触发了照片上的鼠标离开!我可以做什么来解决这个问题？

提前致谢

Answer 1

一个简单而有吸引力的方法是使用计时器。一次鼠标移出，或第二次调用 mouse() 事件的 function() 时，设置超时:

timer = setTimeout("$('.arrow').fadeOut(300);", 1000);

然后，向箭头添加鼠标悬停事件:

$('.arrow').mouseover(function(){
clearTimeout(timer)
});

将鼠标悬停在箭头上将花费不到 1000 毫秒的时间，因此计时器将被清除。另外，请务必为照片的鼠标悬停事件添加类似的clearTimeout，这样当您将鼠标移出然后再次移回时，箭头不会消失。

这样做的最终效果是，当您将鼠标移开后，箭头会停留 1 秒。