javascript - 简单的 Javascript 悬停

Question

我有这段 HTML:

<div id="site-header-inner">
    <div id="header-logo">
    <?php echo wp_get_attachment_image(get_field('header_logo','options'),'full'); ?>
    </div>
    <div id="header-nav">
        <ul>
            <li class="header-nav-item">
            Articles 
            </li>
            <li class="header-nav-item">
            Art Space
            </li>
            <li class="header-nav-item">
            Job Board
            </li>
            <li class="header-nav-item">
            Calendar
            </li>
        </ul>
    </div>
</div>  
<div id="header-nav-dropdown"> 
    <div id="dropdown-inner">
    Dropdown Stuff
    </div>
</div>

当 <li class="header-nav-item">悬停，我想显示 <div id="header-nav-dropdown">使用 javascript/jquery。

在保留 <div id="header-nav-dropdown") 的同时，最简单的方法是什么？只要鼠标悬停在其上或 <li> 上就可见？

Answer 1

维护一个小的自调用函数来管理它可能是最简单的，这样它就不会影响任何其他脚本。

我们所做的就是将鼠标悬停事件绑定(bind)到我们想要显示下拉列表的项目，当我们鼠标移开时，我们给用户 500 毫秒(更改时间

(function($){
    // Select the items you want to bind our mouse events to.
    var $hoverItems = $("#header-nav .header-nav-item, #header-nav-dropdown");
    // Dropdown list.
    var $dropdownList = $("#header-nav-dropdown");
    // This is a timeout variable so we can keep track of our mouse incomings/outgoings.
    var timeout;

    // Bind mouseover/mouseout events.
    $hoverItems.on("mouseover", function(){
        $dropdownList.show();
        clearTimeout(timeout);
    }).on("mouseout", function(){
        timeout = setTimeout(function(){
            $dropdownList.hide();
        }, 500);
    });
})(jQuery);