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

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

问题：现在当鼠标移出按钮或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

来源

2014-12-01 eMTH

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

(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/

来源

2014-12-01 17:13:48 jbarnett

这就是我一直在寻找的！非常感谢你！！ – eMTH 2014-12-01 17:38:10

没问题@ Marduk007 :) – jbarnett 2014-12-03 16:01:50

你可以得到大多有与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/

来源

2014-12-01 17:05:04 superUntitled

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

回答

相关问题