Search code examples
javascriptjquerymouseoverlayermouseout

mouse_over on 2 layers 2 objects

js. jQuery. there are two big objects with 0px interval between. they class is '.big'. There are two small objects which class is '.small'. Each small object position have collision with one '.big' object. If mouse_enter '.big' class object then funcStart(); if mouse_leave then funcStop(). If mouse from '.big' object goes to '.small' starts funcStop() because mouse is left from '.big', despite the fact that '.small' object is over '.big'. I need that mouseover on '.small' is active(button), but funcStop() don't need to be run, because mouse is over '.big' object too when it is over '.small' object.

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

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

tried things like:

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

this is working if i use setTimeout(); , but this time, when we go with mouse from 1st '.big' object to 2nd '.big' object function funcStop(); don't run. tried a lot from stackoverflow. please help. sorry for english. Thanks.

Solution

  • I think your problem is sibling vs child. Check out this sketch showing the difference in behavior. If the nested div is not a child then the mouse does leave the outer element. It must be a child for the mouse to stay. The downside is that if the element extends out then your mouseout is extended as well.

    <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