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

Этот вопрос кажется отчасти связанным с

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

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

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

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

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

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 ().


javascript jquery jquery-hover
person Jens    schedule 18.05.2012    source источник
comment
попробуйте сделать скрипку на jsfiddle.net   -  person The System Restart    schedule 18.05.2012
comment
Попробуйте это: http://jsfiddle.net/WVeDs/ Он отлично работает в Safari и Chrome, но наведите указатель мыши на маленькое изображение в FireFox, и оно будет мерцать как сумасшедшее.   -  person Jens    schedule 18.05.2012
comment
Это не просто проблема jQuery, это проблема здравого смысла, и это сводит меня с ума. Вы могли бы подумать, что есть какой-то способ отличить оставление объекта от того, чтобы оставаться внутри него, просто с другим объектом над ним. Я был бы очень признателен за общее решение этой проблемы.   -  person puk    schedule 13.10.2012

Ответы (2)


arrow_upward
2
arrow_downward

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

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

ДЕМО

person The System Restart    schedule 18.05.2012
comment
Спасибо, демонстрация работает и на FF. Позвольте мне адаптировать это к моему коду и посмотреть, как это работает. Один вопрос: быстрее ли использовать селектор jQuery $ (# main, #small), как указано выше, или прямую ссылку, возвращенную из var img = $ (‹img ... /›)? - person Jens; 18.05.2012
comment
@TheSysRestart: см. Мое изменение исходного вопроса. Ваш подход работает; однако вместо .show () мне сначала нужно было бы разместить меньшее изображение. - person Jens; 18.05.2012

arrow_upward
1
arrow_downward

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

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 (ну, версии, которые у меня есть ...)

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

Йенс

person Jens    schedule 19.05.2012
comment
Черт возьми. Отлично работает на экранах, но совсем не на мобильных устройствах, где нет реального: hover или mouseenter / leave. Опять черт возьми. Что теперь? Apple предложила подход к добавлению обработчика onclick = void (0) (ссылка) здесь тоже не имеет значения. И не уверен, что хочу, чтобы кнопки навигации были видны все время. Условный код на мобильных устройствах? - person Jens; 19.05.2012
comment
Вот что я в итоге сделал: если я обнаружил, что код работает на мобильном устройстве, кнопки отображаются все время. Работает нормально. - person Jens; 09.10.2012