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/

在这个例子中，我将绑定悬停在A和DIV上，并且使用稍微延迟来检查“是否是元素悬停？”状态。

您也可以将悬停绑定到包装LI，这使事情变得简单。这只适用于你的链接和你的div都包含在每个LI中的情况，但是：

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

Answer 2

可以不使用javascript：http://jsfiddle.net/XENww/

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

2 个答案: