javascript - 使用 Div 创建 Jquery Dropdown 并保持双悬停

Question

我想做的是通过在链接上滚动来淡入一个 div。一旦您的鼠标悬停在链接上，您就可以将鼠标悬停在刚刚淡入的 div 周围，您可以单击 div 内的链接。

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

问题似乎是如果您快速移动到下一个链接，以前的 DIV 有时不会淡出。我正在画空白，有什么想法吗？

问题已解决，答案在这里: http://jsfiddle.net/UkneJ/3/

这就是我正在使用的:http://jsfiddle.net/DemhU/17/

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

Answer 1

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

http://jsfiddle.net/UkneJ/

在这个例子中，我将悬停绑定(bind)到 A 和 DIV，并使用轻微的延迟来检查“是否悬停了任一元素？”状态。

您也可以只将 hover 绑定(bind)到包装 LI，这会使事情变得更加简单。不过，这仅在您的链接和 div 都包含在每个 LI 中时才有效:

http://jsfiddle.net/UkneJ/1/