javascript - 为什么 jQuery 悬停效果不起作用？

Question

我需要的是下拉菜单的平滑悬停效果。

$(this).find(".dropdown-menu").stop(true, true).delay(200).fadeOut(500); 对我不起作用。当鼠标悬停时，效果不起作用。

$(document).ready(function () {
    // executes when HTML-Document is loaded and DOM is ready

    // breakpoint and up  
    $(window).resize(function () {
        if ($(window).width() >= 980) {
            // when you hover a toggle show its dropdown menu
            $(".navbar .dropdown-toggle").hover(function () {
                $(this).parent().toggleClass("show");
                $(this).parent().find(".dropdown-menu").toggleClass("show");
                $(this).find(".dropdown-menu").stop(true, true).delay(200).fadeOut(500);
            });

            // hide the menu when the mouse leaves the dropdown
            $(".navbar .dropdown-menu").mouseleave(function () {
                $(this).removeClass("show");
            });
            // do something here
        }
    });
    // document ready  
    //wow.js init
    new WOW().init();
});

这是我的 HTML 标记。我正在使用 bootstrap 4 最新版本。我能用 jQuery 或 javascript 实现平滑的悬停效果吗

<header class="header_area">
    <nav class="navbar navbar-expand-lg navbar-light fixed-top">
        <a class="navbar-brand" href="#">Light House</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
              </button>

        <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav mr-auto">
                <li class="nav-item active">
                    <a class="nav-link" href="index.html">Home <span class="sr-only">(current)</span></a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="about.html">About</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="single.html">Single Post</a>
                </li>
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                      Pages
                    </a>
                    <div class="dropdown-menu animated fadeIn" aria-labelledby="navbarDropdownMenuLink">
                        <a class="dropdown-item" href="#">Item 1</a>
                        <a class="dropdown-item" href="#">Item 2</a>
                        <a class="dropdown-item" href="#">Item 3</a>
                        <a class="dropdown-item" href="#">Item 4</a>
                        <a class="dropdown-item" href="#">Item 5</a>
                    </div>
                </li>
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                      Pages
                    </a>
                    <div class="dropdown-menu animated fadeIn" aria-labelledby="navbarDropdownMenuLink">
                        <a class="dropdown-item" href="#">Item 1</a>
                        <a class="dropdown-item" href="#">Item 2</a>
                        <a class="dropdown-item" href="#">Item 3</a>
                    </div>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="contact_us.html">Contact Us</a>
                </li>
            </ul>
            <form class="form-inline my-2 my-lg-0">
                <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
                <button class="btn btn-outline-success my-2 my-sm-0 search_icon" type="submit"><i class="fa fa-search"></i></button>
            </form>
        </div>
    </nav>
</header>

Answer 1

.hover() 有两个处理程序。鼠标输入和鼠标输出。

如果你想定义鼠标离开时发生的事情，你必须定义处理程序。

element.hover(mouseenter, mouseleave);

Documentation

所以我建议:

$(".navbar .dropdown-toggle").hover(

  // Mouseenter event handler
  function () {
    $(this).parent().toggleClass("show");
    $(this).parent().find(".dropdown-menu").toggleClass("show");
  },

  // Mouseleave event handler
  function(){
    $(this).find(".dropdown-menu").stop(true, true).delay(200).fadeOut(500);
  }
);