只有在悬停菜单项或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); 
});