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

Question

JS. JQuery. Есть два больших объекта с интервалом 0px. они класс ".big". Есть два небольших объекта, класс которых является ".small". Каждая маленькая позиция объекта сталкивается с одним объектом.big. Если объект класса mouse_enter '.big', тогда funcStart(); если mouse_leave, то funcStop(). Если мышь из объекта ".big" переходит в ".small", запускается funcStop (), потому что мышь остается от ".big", несмотря на то, что объект ".small" находится над ".big". Мне нужно, чтобы указатель мыши на ".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' function function funcStop(); не беги много пробовал из stackru. пожалуйста помоги. извините за английский. Благодарю.

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();
});