jquery - 如果光标已经在元素内部，避免触发鼠标悬停事件？

Question

我有这个 div，当您将鼠标悬停在它上面时，它会运行一个小动画:

$('.cg-panel').bind('mouseover.anim', function() {
    $(this).stop(true).css({ 'opacity': 0.4 }).transition({ 'opacity': 0 }, 800);
});

问题在于 .cg-panel 位于另一个根据需要显示和隐藏的 div 之上:

$('#control_grid').show();

当显示“控制网格”时，鼠标悬停事件立即触发。如果你的鼠标已经在它上面，我不希望它触发，只有当你的鼠标从侧面进入它时。

如何避免触发第一个事件？

example fiddle -- 尝试使用 Chrome。由于某种原因它锁定了 Firefox，不知道为什么。

I can't bind the event after it's shown either

Answer 1

如果没有 html 和对你想要的东西的更好描述，很难测试这个理论；但是，由于您只希望在首次进入 div 时发生该事件，因此您是否有理由不想使用 mouseenter 而不是 mouseover？

$('.cg-panel').bind('mouseenter.anim', function() {
    $(this).stop(true).css({ 'opacity': 0.4 }).transition({ 'opacity': 0 }, 800);
});

另请注意，根据您使用的 jquery 版本，bind()已弃用并已替换为 on() .

$('.cg-panel').on('mouseenter.anim', function() {
    $(this).stop(true).css({ 'opacity': 0.4 }).transition({ 'opacity': 0 }, 800);
});

编辑:

我对你的演示做了一些调整，然后我想出了 this possible solution .