基于鼠标悬停显示 div

Question

我正在设计一个带有包含两行名称的标题的网站。当用户将鼠标悬停在其中一个名称上时，需要在名称下方显示一个特定的 div。此 div 将包含其他图像和链接，因此用户必须能够将鼠标从名称向下导航到 div。

为简单起见，我将名称的第一行称为“top”，关联的 div 称为“top-reveal”，将名称的底行称为“bottom”和“bottom-reveal”。 （参见链接的 jsfiddle。）

“Top-reveal”和“bottom-reveal”需要出现在同一个地方，不能与上面的名字重叠。

我第一次尝试使用直接的 CSS div:first-child，但我无法控制用户的“意图”。

然后我使用 hoverIntent 插件切换到 jQuery 方法：

var timeHover = 700;

$("[id^='top']").hoverIntent({
    over: topRevealer,
    timeout: timeHover,
    out: topHider
});
$("[id^='bottom']").hoverIntent({
    over: bottomRevealer,
    timeout: timeHover,
    out: bottomHider
});

function topRevealer() {
    setTimeout(function () {
        $('#bottom-reveal').hide(), $('#top-reveal').fadeIn();
    }, timeHover);
}

function bottomRevealer() {
    setTimeout(function () {
        $('#top-reveal').hide(), $('#bottom-reveal').fadeIn();
    }, timeHover);
}

function topHider() {
    $('#top-reveal').hide()
}

function bottomHider() {
    $('#bottom-reveal').hide()
}

我正在使用hoverIntent，因为我不知道如何使用 .hover() 进行超时。它可以工作，除了显示 div 淡出然后重新进入。我知道这是因为当鼠标从“Top”移动到“Top-Reveal”时它正在调用“TopHider”，然后在它进入时调用“TopRevealer” “Top-Reveal” div，但我不希望它进出。我还注意到它可以创建一个淡入淡出队列，我不知道如何创建各种错误捕获器。

摆弄我在哪里：http://jsfiddle.net/UFZ6U/

正如您所看到的，它几乎就在那里，但我需要一些指导来进行最后的推动，甚至需要一些关于更好的 JavaScript 编码的技巧。我最近才开始在下载独立脚本之外使用 JavaScript，现在我已经多次碰壁了。我正在寻找最直接的答案，它不必是 jQuery 或纯 CSS，只是一个轻量级的工作解决方案。我也没有与 hoverIntent 结婚，但它帮助我走到了这一步。

我希望这是有道理的。

感谢所有潜在的回答者。

Answer 1

如果您已经在使用超时，您可以选择性地存储和清除超时 ID 以创建此效果。以下解决方案不使用 hoverIntent jQuery 插件。

HTML

<div id="hover-area">
    <div id="one" class="hoverable">One</div>
    <div id="two" class="hoverable">Two</div>
    <div id="three" class="hoverable">Three</div>
    <div id="four" class="hoverable">Four</div>
    <div id="one-reveal" class="revealable">One Reveal</div>
    <div id="two-reveal" class="revealable">Two Reveal</div>
    <div id="three-reveal" class="revealable">Three Reveal</div>
    <div id="four-reveal" class="revealable">Four Reveal</div>
</div>

JS

var timeHover = 700;

// Setup reveal and hide on hoverable items
$('.hoverable').on({
    'mouseenter': function() {
        // Get the hoverable ID
        var hoverableId = $(this).attr('id');
        // Generate the associated revealable ID
        var revealableId = hoverableId + '-reveal';
        // Show the associated revealable item (after timeout)
        showRevealable('#' + revealableId);
    },
    'mouseleave': function() {
        // Get the hoverable ID
        var hoverableId = $(this).attr('id');
        // Generate the associated revealable ID
        var revealableId = hoverableId + '-reveal';
        // Hide the associated revealable item (after timeout)
        hideRevealable('#' + revealableId);
    }
});

// Set up to maintain visibility and hide for the revealable items
$('.revealable').on({
    'mouseenter': function() {
        // Clear the timeout for this revealable item
        clearRevealableTimeout(this);
    },
    'mouseleave': function() {
        // Hide the revealable item (after timeout)
        hideRevealable(this);
    }
});

// Clears the timeout for the given revealable container
function clearRevealableTimeout(revealable) {
    // Get the associated timeout ID from the data attribute
    var timeout = $(revealable).data('timeout');
    // Clear the associated timeout
    clearTimeout(timeout);
}

// Shows the given revealable item (after a delay)
function showRevealable(revealable) {
    // Set a new timeout for the show and get the associated ID
    var timeout = setTimeout(function () {
        // Hide any existing revealables that are not this one
        $('.revealable').not(revealable).hide();
        $(revealable).stop().fadeIn();
    }, timeHover);
    // Store the timeout ID in the data attribute
    $(revealable).data('timeout', timeout);
}

// Hides the given revealable item (after a delay)
function hideRevealable(revealable) {
    // Clear the timeout to prevent any pending behavior
    clearRevealableTimeout(revealable);
    // Set a new timeout for the hide and get the associated ID
    var timeout = setTimeout(function () {
        $(revealable).hide();
    }, timeHover);
    // Store the timeout ID in the data attribute
    $(revealable).data('timeout', timeout);
}

DEMO