Question

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');
    });

Answer 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");
    });
});

Answer 2

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

Answer 3

根据我的经验，js菜单比它们的价值更麻烦。如果你不想要任何花哨的褪色或滚动效果，那就是完全可行的CSS solution。

但是！无论如何，这可能与CSS有关。我认为人们正在过度思考它。所有你真正想要的是你的链接仍然看起来徘徊 - 你的显示很好。好的。你可以用CSS和jQuery做到这一点：

ul.dropdown li:hover a,
ul.dropdown li.hover a {
/* how your link should look */
}

现在，如果你已经拥有那种风格（.hover很重要），你的子菜单也应该在悬停时消失，所以其他东西正在进行中。

保持悬停状态（jQuery）

3 个答案: