Невидимые элементы не получают события мыши

Question

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

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

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

Моя первая попытка добиться этого эффекта состояла в том, чтобы клонированные элементы получили видимость: скрытый стиль CSS, но они не реагируют на события мыши.Я попытался использовать пустые элементы с background: transparent вместо этого, и это, похоже, работало нормально, но тестирование в IE9 показало, что эти элементы также не реагируют на события мыши!

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

Кажется, только IE9 имеет эту проблему до сих пор.IE8 появился, чтобы вызвать события на прозрачных элементах нормально.Похоже, что он работает так, как задумано в FireFox и Chrome.

Answer 1

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

background-color: white;
opacity: 0;
filter: alpha(opacity=0); /* for old IE versions */

Это оставляет элементы невидимыми, но все же реагирующими на события мыши.

Answer 2

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

// use $.fn.each so that each thumb gets its own timer.
$(".thumb-behind").each(function(){
  var timer;
  $(this).hover(function(){
    $(this).next().stop(true,true).fadeIn();
  },function(){
    timer = setTimeout(function(){
      $(this).next().stop(true,true).fadeOut();
    },10);
  });

  $(this).next().hover(function(){
    clearTimeout(timer);
  },function(){
    $(this).stop(true,true).fadeOut();
  });
});

просто убедитесь, что вы изменили $ (this) .next (), чтобы выбрать уменьшенное изображение по сравнению с текущим уменьшенным изображением.