Javascript 使用Divs和maintangdualhover创建Jquery下拉列表

我想做的是通过滚动链接来淡入div。一旦你的鼠标在链接上，你就可以在刚刚淡入的div上鼠标，然后你可以点击div内的链接

目前我有四个链接，每一个都有一个div，里面有链接和图片。在链接悬停时，div会在链接下方淡入，然后您可以将鼠标移到div上并使用其中的图像+链接。在链接或div推出时，它应该淡出。此外，如果您将鼠标移动到另一个主导航链接，它将淡出上一个链接，并淡入新的div

问题似乎是，如果您快速移动到下一个链接，上一个DIV有时不会消失。我在画空白，有什么想法吗

问题已解决，答案如下：

这就是我正在处理的问题：

---

有很多方法可以做到这一点，但我总结了一个我以前使用过的方法的快速工作示例：

在本例中，我将hover绑定到A和DIV，并使用一个轻微的延迟来检查“是不是元素被悬停了？”状态

您还可以将hover绑定到包装LI，这使事情变得非常简单。这仅在链接和div都包含在每个LI中时有效，但：

---

不使用javascript也可以：

您能在JSFIDLE中发布代码吗？这看起来很直接，但我不在家，时间有限。有什么理由不使用类来代替#div1..2..3等？每个Div都包含特定的内容。我愿意简化：）这里是JSFIDLE链接：你现在有两个答案，你还需要帮助吗，或者它们对你需要的东西有用吗？必须是javascript/jquery。是的，不幸的是，它们不在同一条直线上。。。这里是我在JSFIDLE上的代码链接，感谢您的标记。在此处调整我的答案以使用您的代码：

$('#div1, #div2, #div3, #div4').hide();

var is_over;

var hide_dropnav = function(a) {
    setTimeout(function() {
        if (is_over) {
            return;
        } else {
            var a_name = $(a).attr('data-name');

            $('#' + a_name).fadeTo(250, 0);

            $('#nav li a').removeClass('active');
        }
    }, 10);
}

$('#nav li a').hover(function() {

    var elem_name = $(this).attr('data-name');

    $('#' + elem_name).stop(true,true).fadeTo(150, 1);

    is_over = true;

    $('#nav li a').removeClass('active');
    $(this).addClass('active');

    var that = this;
    hide_dropnav(that);

}, function(){
    is_over = false;
    hide_dropnav(this);
});

$('#div1, #div2, #div3, #div4').hover(function() {
    is_over = true;
}, function() {
    is_over = false;
});