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

【问题标题】：How to keep submenu div hovered (visible) after mouseout?鼠标悬停后如何保持子菜单 div 悬停（可见）？
【发布时间】：2015-01-29 17:35:07
【问题描述】：

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

问题：现在当鼠标离开 Button 或 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

【问题讨论】：

标签： jquery css menu hover

【解决方案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/

【讨论】：

这正是我想要的！非常感谢！！
没问题@Marduk007 :)

【解决方案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/

【讨论】：