如何在鼠标悬停后让子菜单div保持（可见）？

Question

我在完成这项工作时遇到问题。我有一个子菜单容器（.subOptions），当将鼠标悬停在<li>标签上时，它将变为visible (display:block)。

问题：现在当鼠标移出按钮或div（.subOptions）div变得隐藏。

我需要以某种方式在页面加载，第一个Button1及其子菜单div是可见的，而当鼠标移出div时（只在悬停在其他按钮上时才更改）可见。

<ul class="clearfix submenu"> 
     <li> 
      <a>Button1</a> 
      <div class="subOptions"> 
       Button 1 Content 
      </div> 
     </li> 
     <li> 
      <a>Button2</a> 
      <div class="subOptions"> 
       Button 2 Content 
      </div> 
     </li> 
     <li> 
      <a>Button3</a> 
      <div class="subOptions"> 
       Button 3 Content 
      </div> 
     </li>         
     <li> 
      <a>Button4</a> 
      <div class="subOptions">  
       Button 4 Content 
      </div> 
    </li> 
<ul> 

任何工作解决方案将受到高度赞赏。我希望我解释清楚。

这里是例子：jsFiddle

Answer 1

您需要检查悬停状态，当只改变选择了不同的按钮。

(function($) { 

var activeSubmenuIndex; 
$('.submenu li').on('mouseenter', 
    function() { 
     //return if it's the same button being hovered 
     if ($(this).index() === activeSubmenuIndex) { 
      return; 
     } 
     //remove classes from other buttons, put on new active one 
     $('.submenu li').removeClass('submenuHover'); 
     $('.submenu li a').removeClass('aHover'); 
     //add class for li element 
     $(this).addClass('submenuHover'); 
     $(this).find('a').addClass('aHover') 
    }); 
})(jQuery); 

我还将两个悬停CSS类更改为由JS添加的常规类。这是一个工作小提琴。 http://jsfiddle.net/arbt0896/2/

Answer 2

你可以得到大多有与CSS：

ul.submenu li:first-child { background:#fff; } 
ul.submenu:hover li:first-child { background:#efefc8; } 
ul.submenu:hover li:hover:first-child { background:#fff; } 

http://jsfiddle.net/arbt0896/1/