Question

我有一个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项目移动到可见div，并将其时间恰到好处地保持可见。我已经尝试将一个setTimeout添加到悬停隐藏以试图让时间到达div，但这似乎没有帮助或工作。有什么想法吗？

如果您想在开发中看到这一点，请访问http://naspweb.com/并将鼠标悬停在“建筑培训/认证”菜单选项上。

修改

我根据以下建议尝试了此操作，但子菜单仍然无法显示。

$(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();
        });
});

Answer 1

我会尝试为菜单项事件处理程序的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();
        });
});

我实际上没有对此进行过测试，但我唯一担心的是第一个鼠标输出可能会在设置标志之前触发。如果发生这种情况，你提到的超时将解决这个问题。

从非儿童分区悬停菜单

1 个答案: