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로 효과 나 자바 스크립트

<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

, 이것은과 같이 수행 할 수 있습니다

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

이 가능한 한 빨리 단점이 있습니다 클릭하거나 메뉴 항목 중 하나를 선택하기 위해 마우스를 움직이면 클래스를 되돌릴 수 있습니다. 숨어지기.

모든 경우에 .click()으로 머무를 것을 권합니다.

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

부트 스트랩 CSS 너비를 많이 해결합니다

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

작업 예 : 당신이 페이드를 유지하려면 https://jsfiddle.net/4gas2aok/4/

사용 .fadeToggle()이 모바일 및 데스크톱 브라우저에서 작동합니다 이미 문제가 있으므로 창 너비를 확인하지 않아도됩니다. 부트 스트랩이 자체적으로 처리하도록하십시오.

전체 예제 : https://jsfiddle.net/4gas2aok/7/

Answer 2

.hover()으로 무엇을 할 수는 두 개의 핸들러가 있습니다. 마우스 IN과 마우스 OUT.

마우스 아웃시 발생할 일을 정의하려면 핸들러를 정의해야합니다.

Documentation

element.hover(mouseenter, mouseleave); 

그래서 내가 제안 : 당신이 .hover()을 사용하려면

$(".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); 
    } 
);