отображать кликабельные стрелки в верхней части фотографии с помощью jquery (hover)

Question

У меня есть фотография, и когда пользователь наводит курсор на нее, я отображаю сверху фотографии (используя абсолютное позиционирование) 2 стрелки, одну для перехода к предыдущей фотографии и одну для перехода к следующей. Вот код до сих пор ...

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

Проблема в том, что, поскольку при наведении курсора мыши на стрелки вверху находятся стрелки фото, они исчезают из-за того, что происходит отпуск мыши с фотографии! Что я могу сделать, чтобы решить проблему?

Заранее спасибо

Answer 1

Простой и привлекательный способ сделать это - использовать таймер. Один указатель мыши или второй вызов функции () события hover () устанавливают время ожидания:

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

Затем добавьте событие наведения мыши к стрелкам:

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

Подведение курсора к стрелке займет менее 1000 мс, поэтому таймер будет очищен. Кроме того, обязательно добавьте аналогичный clearTimeout к событию наведения мыши на фотографии, чтобы стрелки не исчезали, если вы наведите курсор мыши, а затем снова вернулись.

Чистый эффект этого состоит в том, что стрелки задерживаются на 1 секунду после перемещения мыши.

Answer 2

Вместо этого используйте наведение мыши.

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

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