Question

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

Answer 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.