mouse_over 在 2 层 2 个对象上

Question

js。 jQuery。有两个大对象，它们之间的间隔为 0px。他们 class 是“.big”。有两个 class 是 '.small' 的小对象。每个小物体位置都与一个“.big”物体发生碰撞。如果 mouse_enter '.big' class object then 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();不要运行。从 Whosebug 尝试了很多。请帮忙。对不起英语。谢谢

Answer 1

我认为你的问题是兄弟 vs child。查看显示行为差异的草图。如果嵌套的 div 不是 child，则鼠标会离开外部元素。必须是 child 才能让鼠标停留。缺点是，如果元素延伸出去，那么你的 mouseout 也会延伸。

<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 事件。原因是 mouseover 和 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 个对象上

mouse_over on 2 layers 2 objects

javascript

jquery

mouseover

layer

mouseout