メニュー項目や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

何かこれはうまくいくはずです。 /非表示やあなたがdivをホバリングさせるためにタイムアウトのネイティブJSのメソッドを表示するかを見つけるために、イベント、.indexと.eqをバインドする.hoverを使用し

。

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