mouseleaveleave не правильно стреляют по элементам-братьями

У меня есть 3 элемента, все они братья и сестры, но они расположены друг над другом. Я хотел использовать mouseenter/mouseleave, но они не работают должным образом. (только самый верхний элемент запускает mouseenter/mouseleave). Есть ли собственный метод jQuery для работы с элементами-братьями? Я хотел бы держаться подальше от проверки каждого элемента, связанного с каждым событием mousemove.mouseleaveleave не правильно стреляют по элементам-братьями

----------- OUTER ELEMENT -------------- 
|          | 
| ------- -------     | 
| | A | | B |     | 
| ------- -------     | 
|          | 
----------- OUTER ELEMENT --------------

определяется как HTML:

<div class="outerelement"></div><!-- position absolute, etc --> 
<div class="a"></div><!-- position absolute, etc --> 
<div class="b"></div><!-- position absolute, etc -->

JavaScript:

$('div').on('mouseenter mouseleave', function(e) { 
    switch (e.type) { 
     case 'mouseenter': 
     $(this).addClass('hover'); 
     break; 
     case 'mouseleave': 
     $(this).removeClass('hover'); 
     break; 
    } 
});

jsFiddle here

Что в конечном итоге происходит в MouseEnter/оставить пожары, когда над A/B правильно, но должен стрелять по внешнему элементу, однако он не ...

источник

2013-06-15 ansiart

Работает нормально для меня в Chrome? – adeneo

как внешний, так и A должны иметь состояния зависания, когда над A. Это работает для вас? – ansiart

Нет, но это не ожидаемое поведение вообще? Почему оба имеют состояние зависания. – adeneo

проверено только с помощью win-chrome.

<!DOCTYPE html> 
<html> 
<head> 
<style type="text/css"> 

    * { 
     box-sizing: border-box; 
    } 

    div.overlay div { 
     position:  absolute; 
     border:   1px solid rgba(0,0,0,0.25); 
     height:   100px; 
     z-index:  10; 
    } 

    div.overlay div.hover { 
     background-color: rgba(0,0,0,0.25); 
    } 

</style> 
<script src="js/jquery-2.0.2.min.js"></script> 
<script type="text/javascript"> 
    $(document).on('ready', function(e) { 

     var body = $(this); //.find('body'); 
     var proxy = $(this).find('div.overlay'); 

     var numChildren = 50; 
     while (--numChildren) { 
      proxy.append(
       $('<div/>').css({ 
        'top': Math.random() * 800, 
        'width': Math.random() * 800, 
        'height': Math.random() * 800, 
        'left': Math.random() * 800 
       }) 
      ); 
     } 

     body.on('mousemove', function(e) { 

      var children = proxy.children(); 
     var x   = e.pageX - window.scrollX; 
     var y   = e.pageY - window.scrollY; 
      for (var i = 0; i < children.length; ++i) { 
       var element = $(children[i]); 
       var rect = element[0].getBoundingClientRect(); 
       if (rect.contains(x, y)) { 
        if (!element.hasClass('hover')) { 
         element.addClass('hover'); 
         element.triggerHandler('truemouseenter'); 
        } 
       } else { 
        if (element.hasClass('hover')) { 
         element.removeClass('hover'); 
         element.triggerHandler('truemouseleave'); 
        } 
       } 
      } 
     }); 

     ClientRect.prototype.contains = function(x, y) { 
      return (x >= this.left && x <= this.right && y >= this.top && y<= this.bottom); 
     } 

    }); 
</script> 
</head> 
<body> 

    <div class="overlay"></div> 

</body> 
</html>

источник

2013-06-15 19:59:37 ansiart

mouseleaveleave не правильно стреляют по элементам-братьями

ответ

Смежные вопросы