なぜ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マークアップがあります。私はブートストラップ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()を使用したい場合は、これがそうのように行うことができます。

$(".navbar .navbar-toggler").hover(function(e) { 
    $(".navbar .navbar-collapse").addClass("show").fadeIn(500); 
}, function(e) { 
    $(".navbar .navbar-collapse").removeClass("show").fadeOut(500); 
}); 

は、これはすぐにような欠点を持っていますマウスを動かしてメニュー項目の1つをクリックまたは選択すると、クラスが元に戻ります隠される。

私はすべての場合について.click()ととどまることを勧めます。これは、モバイルとデスクトップのブラウザで動作します：

$(".navbar .navbar-toggler").click(function() { 
    $(".navbar .navbar-collapse").toggleClass("collapse show"); 
}); 

実施例：https://jsfiddle.net/4gas2aok/4/

あなたはフェードを保持したい場合は、.fadeToggle()を使用します。

$(".navbar .navbar-toggler").click(function() { 
    $dropdown.fadeToggle(500).toggleClass("collapse show"); 
}); 

ブートストラップCSSが幅を大量に対処しますすでに問題があるので、ウィンドウの幅を確認する必要はありません。ただ、ブートストラップでそれを自分自身で処理させてください。

完全な例：https://jsfiddle.net/4gas2aok/7/

Answer 2

.hover()とのスムーズなホバー効果で何ができる2件のハンドラがあります。マウスINとマウスOUT。

マウス出力時に何かを定義する場合は、ハンドラを定義する必要があります。

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); 
    } 
);