javascript - 当我仍将鼠标悬停在标签上时，会发生 onmouseout 事件

Question

当鼠标悬停在标签上时，我希望出现一个图像并出现在屏幕的最前面。当我离开它时，我希望它消失。我的问题是，当我将鼠标移过标签时，图像会很快消失并重新出现。难道只有当我完全脱离标签时才会发生使项目消失的鼠标关闭事件吗？我怎样才能实现这个目标？

labelArray[1].onmouseover = function() {
    if (BBVar != 1)
        mouseOverOption('BB1' + group);
};
labelArray[1].onmouseout = function() {
    if ((clicked == false) && (BBVar != 1))
        mouseOffOption('BB1' + group);
};

function mouseOverOption(a) {
    document.getElementById(a).style.visibility = 'visible';
    document.getElementById(a).style.zIndex="5";
}

function mouseOffOption(a) {
    document.getElementById(a).style.visibility = 'hidden';
    document.getElementById(a).style.zIndex="0";
}

Answer 1

即使您将光标从目标元素移动到其子元素之一，

mouseout 也会触发。另一种方法是 mouseleave 事件，不幸的是它仅在 IE 中受支持。在这里了解更多 http://www.quirksmode.org/dom/events/mouseover.html

如果您可以使用 jQuery，它就具有对 mouseleave 的跨浏览器支持:

$(labelArray[1]).on('mouseleave', function() {
    if ((clicked == false) && (BBVar != 1))
        mouseOffOption('BB1' + group);
});

在纯 JS 中，您必须检查 event.latedTarget 属性才能查看鼠标移动到的位置。如果没有看到您的标记，很难给出准确的解决方案。