마우스 오버시 마우스 오버시 페이드 아웃

Question

마우스 오버시에 하위 메뉴가 페이드 인되도록하고 mouseleave에서 페이드 아웃하려고하는 메뉴가 있습니다. 몇 가지 해결책을 시도해 보았습니다. 대부분 마우스 오버/마우스 아웃이 아닌 마우스 오버 즉시 메뉴가 사라집니다. 아래 코드는 내가 가장 잘 알고 있다고 생각하는 코드입니다. 그러나 결과는 메뉴가 페이드 인되지만 페이드 아웃하지 않는다는 것입니다.

<script type="text/javascript"> 
$(document).ready(function(){ 

     //When hovering a top-level link, submenu fadein. 
     $('.toppunkt a').mouseenter(function(){ 
     $('ul.sub-menu').fadeIn(); 
     }); 

     //When leaving the submenu, fadeout. 
     $('.ul.sub-menu').mouseleave(function(){ 
     $('ul.sub-menu').fadeOut(); 
     }); 
}); 
</script> 

Answer 1

...이 또는 도움이되지 않을 수도 있습니다하지만 당신은하는 MouseLeave에 잘못된 항목을 확인하는 것 같다

더 나은

http://jsfiddle.net/Mutmatt/3ppr8/14/

, 당신은 아마이 메뉴 시스템을 원하는 방식으로 행동하라이 jsfiddle 같다 :

http://jsfiddle.net/Mutmatt/3ppr8/23/

는 하나를 살펴 보자. JS :

jQuery(document).ready(function() { 
    jQuery('#topmenu li').hover(
     //When hovering a top-level link, submenu fadein. 
     function() { 
      jQuery('ul', this).stop().fadeIn(); 
     }, 
     //When leaving the submenu, fadeout. 
     function() { 
      jQuery('ul', this).stop().fadeOut(); 
     } 
    ); 
});​ 

HTML : '.'

<ul id="topmenu"> 
    <li><a href="yep">yep</a> 
     <ul class="sub-menu" style="display: none;"> 
      <li><a href="derp">derp</a></li> 
      <li><a href="yerp">yerp</a></li> 
     </ul> 
    </li> 
</ul>​ 

Answer 2

가 추가 될 수

코드 향후 참조를 위해 정답을 표시하는 것을 잊지 마세요 마우스 왼쪽 기능에서 하위 메뉴를 가져 오는 중. div를 사용하여 솔루션을 작성했습니다. http://jsfiddle.net/PAWQr/12/

는 희망이 도움이 : 여기

는 바이올린입니다.

HTML :

<div class="toppunkt"> 
    <a href="" action="">Here is a list</a> 
    <div class="sub-menu" style="width:70px; border: 1px dotted gray; display: none;">  
     <ul> 
      <li>Option1</i> 
      <li>Option2</i> 
     </ul> 
    </div>  
</div> 

스크립트 :

$(document).ready(function(){ 

    //When hovering a top-level link, submenu fadein. 
    $('.toppunkt a').mouseenter(function(){ 
     //alert('mouse enter'); 
     $('.sub-menu').fadeIn(); 
    }); 

    //When leaving the submenu, fadeout. 
    $('.sub-menu').mouseleave(function(){ 
     $('.sub-menu').fadeOut(); 
    }); 
​});