Javascript 菜单应该在mouseout上隐藏，但它在mouseover上隐藏

我有一个按钮和菜单。鼠标上方的按钮显示菜单。我已经对鼠标离开菜单时隐藏自己进行了编码，但它在鼠标经过菜单之前就隐藏了。帮忙

功能显示菜单（）{
var menuBar=document.getElementById（“菜单”）；
menuBar.style.display=“块”；
}
函数hideMenu（）{
document.getElementById（“菜单”）.style.display=“无”；
}

家
投资组合
关于

鼠标悬停在UL元件上时触发onmouseout事件。用纯javascript解决这个问题很复杂。Jquery有mouseenter和mouseleave方法

    $("#menu_button").mouseenter(function () {
        $("#menu").show();
    });
    $("#menu").mouseleave(function () {
        $(this).hide();
    });

---

您需要使用

mouseleave

，因为：

鼠标指针离开任何子对象时触发mouseout事件 元素以及选定的元素

更新：

更改了

菜单按钮的大小，以避免在外部触发
形象

将css添加到#菜单，现在开始隐藏

添加了一个

mouseleave

到

菜单按钮

以在离开时隐藏 形象

document.getElementById（“菜单按钮”）.addEventListener（'mouseover'，function（）{
document.getElementById（“菜单”）.style.display=“块”；
});
document.getElementById（“菜单”）.addEventListener（'mouseover'，function（）{
document.getElementById（“菜单”）.style.display=“块”；
});
document.getElementById（“菜单”）.addEventListener（'mouseleave'，function（）{
document.getElementById（“菜单”）.style.display=“无”；
});
document.getElementById（“菜单按钮”）.addEventListener（'mouseleave'，function（）{
document.getElementById（“菜单”）.style.display=“无”；
});
#菜单按钮{
显示：块；
宽度：50px；
高度：50px；
}
#菜单按钮img：悬停{
不透明度：0.8；
}
#菜单{
边框：实心1px；
显示：无；
}


家
投资组合
关于

你能将图像的链接更改为完整链接以便我们进行测试吗？@TemaniAfif。我已经尝试了jquery，但由于某种原因，它根本不起作用，是的，我已经包含了库。有趣的是，当我离开菜单栏时，菜单栏并没有消失。我看到它在这里工作，但在我的网站上不工作。@BillHicks我已经更新了一些更改，使它工作得更好。如果这样不行，我需要查看您站点中的其余代码。@BillHicks我看到我所更改的内容不太好，抱歉，我必须修复它。@BillHicks已修复，希望它在您的站点中有效，记住复制css样式。