保持悬停状态 (jQuery)答案

【问题标题】：Maintain hover state (jQuery)保持悬停状态 (jQuery)
【发布时间】：2010-03-03 09:44:52
【问题描述】：

HTML：

<ul class="dropdown">
    <li><a href="#">Item 1</a></li>
    <li>
        <a href="#">Item 2</a>
        <div class="submenu">something</div>
    </li>
</ul>

jQuery:

    $j("ul.dropdown li").hover(function () {
        $j(this).addClass("hover");
        $j('div.submenu', this).css('visibility', 'visible');
    }, function () {
        $j(this).removeClass("hover");
        $j('div.submenu', this).css('visibility', 'hidden');
    });

... 菜单工作正常，但是当显示div.submenu 并将光标移到它时，打开此子菜单的链接失去其“悬停”类，我如何在两个链接上保持悬停状态以及打开时的子菜单？

我试过了，但它不起作用：

$j("ul.dropdown li").hover(function () {
        $j(this).addClass("hover");
        $j('div.submenu', this).css('visibility', 'visible').hover(function () {
                $j(this).prev('a').addClass('hover');
            }, function () {
                $j(this).prev('a').removeClass('hover');
            });    
    }, function () {
        $j(this).removeClass("hover");
        $j('div.submenu', this).css('visibility', 'hidden');
    });

【问题讨论】：

标签： jquery drop-down-menu menu hover

【解决方案1】：

您可能需要考虑子菜单 div 也是 jQuery 元素的一部分，同时附加悬停效果。可能是这样的：

$('ul.dropdown li').each(function() {
    var self = $(this),
        menu = $(this).find('div.submenu'),
        el = menu.add(this);
    el.hover(function() {
            self.addClass("hover");
    menu.css("visibility", "visible");
    }, function() {
            self.removeClass("hover");
        menu.css("visibility", "hidden");
    });
});

【讨论】：

谢谢，但还是一样，当我移动到子菜单时，父链接恢复正常。
有另一个类“活动”，你可以添加到
标记同时使菜单可见并在隐藏时删除它。此“活动”对标题 el 的 CSS 效果应与“悬停”

【解决方案2】：

您无法在不悬停的元素上保持悬停状态 :) 如果可能，请尝试将 div.submenu 放在 ul.dropdown li 内。另一种解决方案是停止依赖hover() 并使用另一种操作类的方式。不要使用hover() 来切换类，使用一些函数来完成它并在需要时调用它。

【讨论】：

我假设 div.submenu is 在 li 中。选择器看起来像是在 'this' 中寻找 .submenu（逗号在引号之外，而不是在引号之内）。
嗯，是的，我们需要看看他的 HTML 代码。还有一些 CSS，因为给 div.submenu 一些绝对定位也会破坏悬停。
我在想什么可能会添加一个条件，如果将鼠标悬停在子菜单上，则将类悬停添加到父级？