只有在懸停菜單項或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 !--> 

而在導航下方，當我將鼠標懸停在相應的項目上時，會顯示其內容。

 <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事件附加到它。該解決方案還採用了rel attibute存儲部件id：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以查找要顯示/隱藏哪一個以及用於超時的原生JS方法以讓您懸停div。

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