Jquery 非子Div中的悬停菜单

我有一个div，我需要像悬停菜单一样运行。我不能将其作为子元素（因为我在Wordpress主题中是如何使用它的）。触发悬停的li菜单项的id为#menu-item-183。我需要出现的div是#const training menu

我有以下代码，几乎可以工作

        //hides the div on page load
        $('#const-training-menu').hide();

        //show menu div when li is hovered
        $('#menu-item-183').hover(function () {
            $('#const-training-menu').show();
        }, function () {
                $('#const-training-menu').hide();
        });

        //keeps menu div visible when the menu div is hovered
        $('#const-training-menu').hover(function () {
            $('#const-training-menu').show();
        }, function () {
            $('#const-training-menu').hide();
        });

然而，这个功能有点缺陷。您必须非常快地从li项移动到visible div，并对其进行适当的计时以保持其可见。我尝试在悬停隐藏中添加一个setTimeout，以允许有时间到达div，但这似乎没有任何帮助或效果。有什么想法吗

如果您想在开发中看到这一点，请访问并将鼠标悬停在“施工培训/认证”菜单选项上

---

编辑

---

我根据下面的建议尝试了这个方法，但是子菜单仍然不可见

$(document).ready(function () {                        
        $('#const-training-menu').hide(); //initial hide
              var isHovered = false;
        $('#menu-item-183').hover(function () {
            $('#const-training-menu').show();
        }, function () {
            if(isHovered)return; //allows other event handler to override this mouseout
            setTimeout(function() {
                $('#const-training-menu').hide();
            }, 1000);
        });

        $('#const-training-menu').hover(function () {
            isHovered = true;
            $('#const-training-menu').show();
        }, function () {
            isHovered = false;
            $('#const-training-menu').hide();
        });
});

---

我会尝试为菜单项事件处理程序的mouseout部分设置某种覆盖标志；大概是这样的：

$(function(){
    var isHovered = false;

    $('#menu-item-183').hover(function () {
            $('#const-training-menu').show();
        }, function () {
            if(isHovered)return; //allows other event handler to override this mouseout
            $('#const-training-menu').hide();
        });

        $('#const-training-menu').hover(function () {
            isHovered = true;
        }, function () {
        isHovered = false;
            $('#const-training-menu').hide();
        });
});

---

我还没有实际测试过，但我唯一担心的是，在设置标志之前，第一次鼠标移出可能会触发。如果确实发生超时，您提到的超时可以解决此问题。

您能告诉我什么是

$（'#menu-item-183'）。悬停（function（）{$（'#const training menu'）.show（）；}，function（）{$（'#const training menu'）。hide（）

命令？我的意思是，为什么要同时使用显示和隐藏功能？它同时指定了mousein和mouseout事件处理程序。但是我们不能默认使用

display:none

隐藏

#const training menu

，当它悬停并显示时..当它滑鼠时，它会自动隐藏吗？不，因为需要在两种不同的条件下显示，菜单项被悬停，然后菜单本身被悬停