Question

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

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

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/

如何在mouseout后保持子菜单div（可见）？

2 个答案: