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

发布于 2024-09-30 11:45:04 字数 341 浏览 3 评论 0原文

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

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

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

提前致谢

原文

i have a photo and when the user hovers over it i display on top of the photo (using absolute positioning) 2 arrow, one for going in the previous photo and one for going to the next. Here is the code so far...

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

The problem is that because the arrows are on top of the photo when i mouseover the arrows to click, they dissapear because the mouseleave from the photo is triggered! What can i do to solve the problem?

Thanks in advance

分享到QQ

分享到微博

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

发布评论

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

自由如风 2024-10-07 11:45:04

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

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

然后，向箭头添加一个 mouseover 事件：

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

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

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

A simple and attractive way to do this is to use a timer. One mouseout, or the second function() call of the hover() event, set a timeout:

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

Then, add a mouseover event to the arrows:

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

Mousing over the arrow will take well under 1000ms, so the timer will be cleared. Also, be sure to add a similar clearTimeout to the mouseover event of the photo so the arrows don't vanish if you mouse out and then right back in again.

The net effect of this is that the arrows linger for 1 second after you move the mouse away.

回复收藏 0 原文

情场扛把子 2024-10-07 11:45:04

请改用鼠标悬停。

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

Use mouseover instead.

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

回复收藏 0 原文

三生一梦 2024-10-07 11:45:04

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

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

Thanks Surreal Dreams! The final code for anyone interested...

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

回复收藏 0 原文

~没有更多了~