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淡出然后再进入。我知道这是因为当鼠标从“顶部”移动到“顶部显示”然后在它进入“TopRevealer”后调用“TopRevealer”时它会调用“TopHider” “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

显示基于鼠标悬停的div

1 个答案: