Question

JS。 jQuery的。有两个大对象，间隔为0px。他们的班级是'.big'。有两个小对象，类是'.small'。每个小对象位置都与一个'.big'对象发生冲突。如果mouse_enter'.big'类对象则为funcStart（）;如果mouse_leave然后funcStop（）。如果来自'.big'对象的鼠标转到'.small'，则启动funcStop（），因为鼠标是从'.big'保留的，尽管'.small'对象超过'.big'。我需要'.small'上的鼠标悬停处于活动状态（按钮），但是不需要运行funcStop（），因为当它超过'.small'对象时鼠标也在'.big'对象上。

<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（）; ，但这一次，当我们用鼠标从第一个'.big'对象到第二'.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个事件。原因是鼠标悬停和mouseout在文档周围移动光标时会多次触发，这可能会导致不必要的行为。

所以试试这个：

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

mouse_over在2层2对象

2 个答案: