JQuery парение под другим слоем - PullRequest
Новая
       4

JQuery парение под другим слоем

13 голосов
/ 06 марта 2011

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

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

Ответы [ 7 ]

30 голосов
/ 06 марта 2011

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

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

4 голосов
/ 23 октября 2012

Используйте 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 голосов
/ 06 марта 2011

На мой взгляд, у вас есть несколько вариантов:

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

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

0 голосов
/ 10 декабря 2013

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

0 голосов
/ 07 марта 2011

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

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/

0 голосов
/ 07 марта 2011

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

0 голосов
/ 06 марта 2011

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

...