Как разрешить наведение мыши на перекрывающиеся изображения в jQuery?

Question

Этот вопрос, кажется, имеет отношение к

• Как я могу проверить, находится ли мышь над элементом в jQuery?
• JQuery проверить состояние наведения перед запуском запуска

но все еще не совсем. Вот в чем дело: я пишу небольшую галерею, и в какой-то момент пользователь нажимает на миниатюру. Большая версия изображения показана внутри полноэкранного режима. Все идет нормально. Когда наведена указатель мыши, я показываю три изображения: близко, слева, справа, предназначенное для навигации по альбому; когда мышь покидает изображение или навигационные изображения, три навигационных изображения исчезают.

Эти три навигационных изображения частично перекрываются с основным изображением, например, близкое изображение представляет собой круг в верхнем левом углу. И это сложная часть.

Отпуск мыши срабатывает всякий раз, когда мышь перемещается от основного изображения со стороны или с основного изображения на одно из трех небольших перекрывающихся изображений. Мышиный центр запускается для каждого из небольших перекрывающихся изображений, как и ожидалось.

Однако это создает эффект странного мигания, потому что при отпускании мышью основного изображения я скрываю () три небольших изображения, что немедленно вызывает указатель мыши для основного изображения из-за наложения и того, что мышь все еще находится сверху основного изображения.

Чтобы избежать этого, я попытался определить, переместилась ли мышь после щелчка основного изображения на одно из небольших перекрывающихся изображений. Для этого я использовал этот код:

main_img.mouseleave(function() {
  if (!hoverButtons()) {
    doHideButtons();
  }
});

function hoverButtons() {
  return (close_img.is(":hover")) || (left_img.is(":hover")) || (right_img.is(":hover"));
}

Это прекрасно работает в Safari и Chrome, но не в FF и IE, где изображения все еще мигают. Далее, перебирая посты, кажется, что проблема заключается в ":hover", поскольку это не правильное выражение селектора, а псевдокласс CSS?

Я пытался работать с переключателями, которые я включал / выключал при вводе мышью / отпускании мышью различных изображений, но это тоже не сработало, потому что события, кажется, запускались в разных порядках.

Как мне это сделать? Спасибо!

РЕДАКТИРОВАТЬ: Мне, возможно, придется уточнить: перед отображением кнопок навигации, я установил их соответствующие атрибуты left и top, чтобы разместить их в зависимости от положения основного изображения. Это означает, что мне нужно сделать некоторую работу, прежде чем я смогу вызвать.show() для селектора jQuery. Я попытался добавить новую функцию.placeShow(), но она не совсем работала в отношении таких селекторов, как $(". Nav-button:hidden"). PlaceShow().

Answer 1

Вы можете попробовать это:

$("#main, #small").mouseenter(function() {
    $("#small:hidden").show();
}).mouseleave(function(e) {
    if(e.target.id != 'main' || e.target.id != 'small') {
      $('#small').hide();
    }
});

DEMO

Answer 2

Вот что я в итоге делал. В слайд-шоу я использую четыре изображения: основное изображение, а затем левое, правое, изображение кнопки закрытия.

main_img = $("<img ... class='main-photo slide-show'/>");
close_img = $("<img ... class='nav-button slide-show'/>");
left_img = $("<img ... class='nav-button slide-show'/>");
right_img = $("<img ... class='nav-button slide-show'/>");

Классы здесь в основном пустые, но помогите мне выбрать на основе приведенных выше ответов. Основное изображение затем отображается без кнопок навигации, и я прикрепляю следующие функции обработчика событий:

$(".slide-show").mouseenter(function() {
  $(".photo-nav:hidden").placeShow();
});
$(".slide-show").mouseleave(function() {
  $(".photo-nav").hide();
});

где placeShow() перемещает кнопки навигации в соответствующие места. Эта функция определяется следующим образом:

$.fn.placeShow = function() {
  var pos = main_img.position();
  var left = pos.left;
  var top = pos.top;
  var width = main_img.width();
  var height = main_img.height();

  close_img.css({ "left":"" + (left-15) + "px", "top":"" + (top-15) + "px" }).show();
  left_img.css({ "left":"" + (left+(width/2)-36) + "px" , "top": "" + (top+height-15) + "px" }).show();
  right_img.css({ "left":"" + (left+(width/2)+3) + "px", "top":"" + (top+height-15) + "px" }).show();
}

До сих пор это работало на Safari, IE, FF, Chrome (ну, у меня есть версии...)

Дайте мне знать, что вы думаете, если я смогу урезать этот код больше, или если есть альтернативные решения, которые были бы более элегантными / быстрыми. Окончательный результат всего этого теперь на моем сайте.

Jens