Javascript导航，悬停显示，取消悬停隐藏与超时，如何

Javascript navigation, hover show, unhover hide with timeout, how?

本文关键字：悬停 超时 如何 隐藏 显示 导航 Javascript 取消      更新时间：2023-09-26

我有导航:

<li class="sliding-element zobrazSubMenu">
    <a href="/Antivirusy.html">Antivírusy</a>
    <div class="sub-content">Bla blabla</div>
</li>
<li class="sliding-element zobrazSubMenu">
    <a href="/Virusy.html">Virusy</a>
    <div class="sub-content">Some content</div>
</li>

如果我将鼠标悬停在<元素，但如果我离开鼠标，我需要添加一些超时(1秒)来隐藏子内容。

如果在超时结束(1秒)之前，我将第一个

  • 和第二个
  • ，然后再一个
  • 悬停，则不隐藏第一个子内容。

    我想要的实例:http://www.designchemical.com/lab/jquery-mega-drop-down-menu-plugin/advanced-styling/黑色导航悬停。将鼠标移动到"车辆"，然后将鼠标移动到"关于我们"，再快速移动到"车辆"。这是我不知道的效果。

    我需要应用到我的自定义垂直菜单

    • 假设你使用jQuery，你可以这样做:

    <li class="sliding-element zobrazSubMenu" onmouseenter="showSubContent(this)" onmouseleave="hideSubContent(this)">
    <a href="/Antivirusy.html">Antivírusy</a>
    <div class="sub-content">Bla blabla</div>
</li>
<li class="sliding-element zobrazSubMenu" onmouseenter="showSubContent(this)" onmouseleave="hideSubContent(this)">
    <a href="/Virusy.html">Virusy</a>
    <div class="sub-content">Some content</div>
</li>
    Javascript

    function showSubContent(sender) {
    if (sender.timerHandle === undefined) {
        $(sender).find(".sub-content").show();
    } else {
        clearTimeout(sender.timerHandle);
        sender.timerHandle = undefined;
    }
}
function hideSubContent(sender) {
    sender.timerHandle = setTimeout(function () {
        $(sender).find(".sub-content").hide();
        sender.timerHandle = undefined;
    }, 1000);
}
    演示工作

    相关文章：