mouse_over на 2 слоях 2 объекта

Question

js. JQuery. есть два больших объекта с интервалом 0px между ними. они являются «.big». Есть два небольших объекта, класс которых «.small». Каждая маленькая позиция объекта имеет столкновение с одним «.big» объектом. Если mouse_enter '.big' class object, то funcStart(); если mouse_leave then funcStop(). Если мышь из объекта «.big» переходит в «.small», запускает funcStop(), потому что мышь оставлена ​​с «.big», несмотря на то, что объект «.small» находится над «.big». Мне нужно, чтобы на панели «.small» была нажата кнопка «.small», но funcStop() не нужно запускать, потому что мышь также находится над объектом «.big», когда объект находится над объектом «.small».

<div class=".big"></div> 
<div class=".small"></div> 
<div class=".big"></div> 
<div class=".small"></div> 

$(".big").mouseover(function(){ 
    funcStart(); 
}); 
$(".big").mouseout(function(){ 
    funcStop(); 
}); 

пытался что-то вроде:

$(".big").mouseout(function(){ 
    $(".small").mouseout(function(){ 
     var DONTSTOP = true; 
    }); 
    if(!DONTSTOP) { 
     funcStop(); 
    } 
}); 

это работает, если я использую SetTimeout(); , но на этот раз, когда мы идем с мышью с 1-го '.big' объекта на 2-ю '.big' функцию объекта funcStop(); не запускайте. много пробовал из stackoverflow. пожалуйста помоги. извините за английский. Спасибо.

Answer 1

Я думаю, что ваша проблема заключается в браке и ребенке. Проверьте этот эскиз, показывая разницу в поведении. Если вложенный div не является потомком, тогда мышь оставит внешний элемент. Это должен быть ребенок для мыши, чтобы остаться. Недостатком является то, что, если элемент расширяется, ваше мышление также расширяется.

<div class ="big">1 big sibling.</div> 
<div class ="small">2 small sibling.</div> 

<div class ="big">3 big parent. 
    <div class = "small">4 small child.</div> 
</div> 

http://codepen.io/anon/pen/RaJEOo

Answer 2

Я хотел бы предложить вам использовать mouseenter/mouseleave события вместо этого. Причина в том, что мышь и мышь стреляют несколько раз, перемещая курсор вокруг документа, что может вызвать нежелательное поведение.

Так попробуйте это:

<div class=".big"></div> 
<div class=".small"></div> 
<div class=".big"></div> 
<div class=".small"></div> 

$(".big").mouseenter(function(){ 
    funcStart(); 
    $(".small").on('mouseenter', function(){//Do Your Magic, Mouse is over the .small}); 
    $(".small").on('mouseleave', function(){//Do Your Magic, Mouse retuned to .big}); 
}); 
$(".big").mouseleave(function(){ 
    funcStop(); 
});