JQuery hover div под другим слоем

Можно ли игнорировать все div, которые "выше", элемент, связанный с ним с помощью jQuery? Например, у меня есть элемент A, связанный с ним событием hover, но есть и другие элементы B, C, D, которые "находятся в абсолютном положении" над элементом A. Поэтому, когда пользовательская мышь переходит к элементу B, C, D, событие наведения больше не срабатывает, даже если B, C и D находятся непосредственно над элементом. Можно ли игнорировать элементы B C и D?

UPDATE: Я на самом деле пытаюсь создать карту (элемент A) с элементами B, C, D как метки области. Так, например, для карты штата Нью-Йорк у вас будут текстовые элементы "Манхэттен", "Нью-Джерси" и т.д., Перекрывающие карту. Вот почему мне нужно, чтобы зависание срабатывало, даже если пользователь наводил указатель на метки.

Ответы

Ответ 1

Если вы можете использовать CSS3, вы можете установить pointer-events:none для абсолютно позиционированных элементов, см. демо здесь.

Все современные браузеры поддерживают это свойство - только IE9 и ниже и Opera Mini не поддерживают его (на момент написания). Это также означает, что у вас не будет никаких указателей-событий для тех элементов, которые могут быть не совсем такими, какие вы хотите.

Ответ 2

Как я вижу это, у вас есть несколько вариантов:

  • Сделайте так, как рекомендовал Иварска, и создайте пустой элемент поверх всех них и используйте это для триггера.
  • Привязать к mousemove на всей странице и найти, когда он "внутри коробки" (т.е. над целевым элементом) - в основном, заново изобрести событие зависания. (Но не это добавляет некоторые довольно серьезные накладные расходы на вашу страницу).
  • Редизайн

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

Ответ 3

Используйте e.relatedTarget, чтобы определить, зависел ли пользователь над одним из ваших вложенных (абсолютных) элементов. Может быть, проще, если вы дадите своим ярлыкам карты класс

например: Чтобы показать метки во время состояния наведения на карте и скрыть их только когда пользователь покидает карту.

    $("#map").hover(
      function(e) { 
        $(this).find(".labels").fadeIn();
      },

      function(e) {
        if( $(e.relatedTarget).hasClass("maplabel") ) {
          //The user has hovered over a label...Do nothing (or some other function)
        } else {
          // User has left the map and isn't over a label
          $(this).find(".labels").fadeOut();
      }
    );

Ответ 4

Единственное решение, о котором я сейчас подумал, - создать невидимый элемент наверху и дать ему триггер зависания.

Ответ 5

Вы можете сделать z-индекс элемента A выше, чем у элементов B, C и D.

Ответ 6

Хотя есть несколько способов исправить это, возможно, самым простым было бы добавить событие наведения ко всем элементам:

HTML

<div id="a" class="hover"></div>
<div id="b" class="hover"></div>
<div id="c" class="hover"></div>
<div id="d" class="hover"></div>
<div id="state">unhovered</div>

CSS

#a {
    width: 350px;
    height: 300px;
    border: 1px solid #000;
    background-color: #ccc;
}
#b {
    position: absolute;
    top: 35px;
    left: 35px;
    width: 35px;
    height: 30px;
    border: 1px solid #000;
    background-color: #cca;
}
#c {
    position: absolute;
    top: 85px;
    left: 85px;
    width: 35px;
    height: 30px;
    border: 1px solid #000;
    background-color: #cca;
}
#d {
    position: absolute;
    top: 85px;
    left: 135px;
    width: 35px;
    height: 30px;
    border: 1px solid #000;
    background-color: #cca;
}

JQuery

$(document).ready(function(){
    $('.hover').hover(
        function(){
            $('#state').text('hovered');
        },
        function(){
            $('#state').text('unhovered');
        }
    );
});

Пример здесь: http://jsfiddle.net/userdude/H5TAG/

Ответ 7

Регулировка z-индекса, о которой упоминалось выше, работает. Сделайте индекс z выше для элемента, который вы хотите распознать, наведите указатель мыши.