메뉴 항목이나 div를 마우스로 가리킬 때만 div를 표시하려면 어떻게해야합니까?

Question

순서가없는 목록에 항목이 있습니다. 이 목록의 외부에 div가 숨겨져 있습니다 (display : none; 사용). 당신이 목록 항목 위로 마우스를 가져 가면 div가 나타나길 원합니다. 마우스를 목록 항목에서 그 아래에있는 div로 옮기면 표시되어야합니다.

CSS, JavaScript/jQuery를 통해이를 수행 할 수 있습니다. 또한 내 문서가 HTML5로 설정되어 있습니다.

이것이 현재 내가 작업하고있는 것입니다.

<nav id="main-menu"> 
     <ul> 
      <li><a class="first-link parent" href="">First Link</a></li> 
      <li><a class="second-link parent" href="">Second Link</a></li> 
      <li><a class="third-link parent" href="">Third Link</a></li> 
      <li><a class="fourth-link parent" href="">Fourth Link</a></li> 
     </ul> 
    </nav><!-- #main-menu !--> 

nav 아래에는 해당 항목 위에 마우스를 올리면 표시 할 콘텐츠가 있습니다.

 <div id="first-widget" class="widget-container"> 
      <h2>Sub Title</h2>    
      <p>Lorem Ipsum 
      <a href="#">Read More</a></p> 

     </div><!-- .first-widget !--> 


<div id="second-widget" class="widget-container"> 
      <h2>Sub Title</h2>    
      <p>Lorem Ipsum 
      <a href="#">Read More</a></p> 

     </div><!-- .second-widget !--> 

<div id="third-widget" class="widget-container"> 
      <h2>Sub Title</h2>    
      <p>Lorem Ipsum 
      <a href="#">Read More</a></p> 

     </div><!-- .third-widget !--> 



<div id="fourth-widget" class="widget-container"> 
      <h2>Sub Title</h2>    
      <p>Lorem Ipsum 
      <a href="#">Read More</a></p> 

     </div><!-- .fourth-widget !--> 

    </aside><!-- .hidden !--> 

나는이에 대한 쉬운 해결책이 있어야 같은 느낌,하지만 내 시도는 지금까지 짧은 떨어졌다. 가장 큰 문제는 메뉴 항목을 가리킬 때뿐만 아니라 메뉴에서 보이는 div로 이동할 때도 div 표시를하는 것입니다.

의견을 보내 주시면 감사하겠습니다. 시간을내어 읽어 주셔서 감사합니다.

Answer 1

당신은 div에서 위젯을 포장 할 수 있으며에 mouseleave 이벤트를 연결합니다. 이 솔루션은 또한 위젯 id 저장하기 rel attibute을 사용 DEMO

HTML

<div id="wrap"> 
    <nav id="main-menu"> 
     <ul> 
      <li><a class="first-link parent" rel="first-widget" href="">First Link</a></li> 
      <li><a class="second-link parent" rel="second-widget" href="">Second Link</a></li> 
      <li><a class="third-link parent" rel="third-widget" href="">Third Link</a></li> 
      <li><a class="fourth-link parent" rel="fourth-widget" href="">Fourth Link</a></li> 
     </ul> 
    </nav><!-- #main-menu !--> 

    <div id="first-widget" class="widget-container"> 
       <h2>Sub Title 1</h2>    
       <p>Lorem Ipsum 
       <a href="#">Read More</a></p> 
    </div><!-- .first-widget !--> 
     ... 
</div> 

JS

$('#main-menu a').mouseover(function() { 
    var $this = $(this); 
    var id = $this.attr('rel'); 
    var $currentWidget = $('#' + id); 
    $currentWidget.show().siblings('.widget-container').hide(); 
}); 
$('#wrap').mouseleave(function() { 
    $('.widget-container').hide(); 
}); 

Answer 2

이와 비슷한 기능이 작동합니다.

.hover을 사용하여 표시/숨기기를 찾기 위해 .index 및 .eq을 사용하고 div를 가리 키도록 시간 제한을위한 기본 JS 메서드를 사용합니다.

var timeout; // store a timeout here 

$('#main-menu lia ').hover(function() 
{ 
    $('.widget-container').eq($(this).parent().index()).show(); 
}, function() 
{ 
    timeout = setTimeout(function() 
    { 
     $('.widget-container').eq($(this).parent().index()).hide(); 
    }, 1000); 
); 

$('.widget-container').hover(function() 
{ 
    clearTimeout(timeout); 
}, function() 
{ 
    timeout = setTimeout(function() 
    { 
     $(this).hide(); 
    }, 1000); 
});