简单的 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"> 悬停时，我想使用javascript/jquery 显示<div id="header-nav-dropdown">。

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

Answer 1

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

我们所做的只是将鼠标悬停事件绑定到我们想要显示下拉列表的项目，当我们鼠标移出时，我们给用户 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);

Answer 2

这是执行此操作的普通方法。添加 CSS display:none 以隐藏您想要的任何元素（在这种情况下，当您悬停 li 时将显示您的标题元素）。

获取li 元素并给它们一个事件。

var derp = document.getElementsByClassName("header-nav-item");
var herp = document.getElementsByClassName("header-nav-dropdown");
for (var i=0;i<derp.length;derp++) { //loop the array of dom elements
    derp[i].addEventListener('mouseover', function() {
        for (var x=0;x<herp.length;herp++) {
            herp[x].style.display = "block"; //or inline etc
        }
    });
    derp[i].addEventListener("mouseout", function() {
        for (var x=0;x<herp.length;herp++) {
            herp[x].style.display = "none"; //hide again
        }
    });
}

这会循环 li 元素，为 mouseout 和 mouseover 添加侦听器，并在其中隐藏/显示带有标题类的所有元素。不需要 jQuery！

Answer 3

我会使用变量作为标志并执行以下操作：

var liHover = false;
var dropdownHover = false;
$(document).ready(function() {

    $('.header-nav-item').mouseover(function() {
        liHover = true;
        $('#header-nav-dropdown").show();
    });
    $('#header-nav-dropdown').mouseover(function() {
        dropdownHover = true;
    });

    $('.header-nav-item').mouseout(function() {
        liHover = false;
    });
    $('#header-nav-dropdown').mouseout(function() {
        dropdownHover = false;
    });

    $('.header-nav-item, #header-nav-dropdown').mouseout(function() {
        if (!liHover && !dropdownHover) {
            $('#header-nav-dropdown").show();
        }
    });
});

现在我将解释那里的所有决定。鼠标悬停在单独的方法调用中，因为它比使用 if 语句并将它们组合起来更有意义。 li hover 需要显示下拉菜单并调整其各自的 flag，而 dropdown hover 只需要调整其 flag。我仍然选择将鼠标悬停的标志调整分开，但是您可以将它们都放在带有 if 语句的组合鼠标悬停中。当然，对于组合的，它是这样的，因为这是任何一个实例中都会存在的功能。

编辑：对不起，我有一个错字，最后一个 mouseout 说 mouseover。已经解决了。

Answer 4

我希望这是你需要的！

jquery：

$('#header-nav li.header-nav-item').hover(function () {
    $('#header-nav-dropdown').show(); 
}, function () {
    $('#header-nav-dropdown').hide();
});

css:

#header-nav-dropdown {
    display: none;
}