Question

我有一张照片，当用户将鼠标悬停在照片上时，我会在照片顶部显示（使用绝对定位）2箭头，一张用于上一张照片，一张用于转到下一张照片。这是迄今为止的代码......

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

问题在于，当鼠标悬停在箭头上点击时，箭头位于照片的顶部，它们会消失，因为照片中的鼠标距离被触发！我该怎么做才能解决问题？

提前致谢

Answer 1

请改用鼠标悬停。

$('a.large_product_photo').mouseover(...)

Answer 2

一种简单而有吸引力的方法是使用计时器。一次mouseout或hover（）事件的第二次function（）调用设置超时：

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

然后，将鼠标悬停事件添加到箭头：

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

鼠标悬停在箭头上的时间不到1000毫秒，因此计时器将被清除。此外，请务必在照片的鼠标悬停事件中添加类似的clearTimeout，这样如果您将鼠标移出然后再向右移动，则箭头不会消失。

这样做的净效果是在你移开鼠标后箭头会停留1秒钟。

Answer 3

感谢超现实的梦想！任何有兴趣的人的最终代码......

var timer;
$('a.large_product_photo').hover(
  function () {
    $('.arrow').fadeIn(300);
    clearTimeout(timer);
  },
  function () {
    timer = setTimeout("$('.arrow').fadeOut(300);", 300);
  }
);

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

使用jquery在照片上显示可点击的箭头（悬停）

3 个答案: