jQuery的UL LI悬停效果 [英] jQuery ul li hover effect

问题描述

我在这里这段代码，我试图显示嵌套的 .submenu 列出 ul＃menu li 悬停事件。如果您可以看到 ul.submenu 位于 li 的内部，但由于某些原因，当您拖动鼠标从实际的 ul＃menu li a 到它的嵌套 ul.submenu 它会消失，就好像你正在移出的。我不明白为什么会发生这种情况。

I have this code here and I am trying to show the nested .submenu lists on ul#menu li hover events. If you can see the ul.submenu's are inside the li's but for some reason when you drag your mouse from the actual ul#menu li a to its nested ul.submenu it disappears, as if you are moving out of it. I do not understand why that happens.

我试着改变了一下DOM以及使用 setTimeout ，但没有运气。

I have tried changing a bit the DOM as well as using setTimeout but with no luck.

有关如何完成此任务的任何想法？更重要的是......为什么会出现我的问题？我的意思是，由于 ul.submenu 在里，所以 li 不应该是考虑同样的悬停区域？

Any ideas of how to get this done? And more importantly... why my problem occurs? I mean, since the ul.submenu is inside the li shouldn't it be considered the same hover area?

推荐答案

常见问题。父菜单项和 .submenu 之间的空格是罪魁祸首。

Common problem. The space between the parent menu item and .submenu is the culprit.

一个简单的解决方法是将 .submenu 在一个 div 中，这足够用作菜单项和子菜单之间的桥梁。

An easy fix for this is wrapping .submenu in a div that's wide enough to act as bridge between the menu item and submenu.

请看这里 - http ：//jsfiddle.net/BuJav/15/

CSS变化 -

.submenu-wrapper {
    position: absolute;
    min-width: 160px;
    min-height: 36px;
    top: -4px;
    left: 160px;
}
.submenu {
    position: relative;
    min-width: 160px;
    min-height: 36px;
    top: 0;
    left: 10px;
    background: url('../images/gradient_menuarea.png') repeat-x;
}

JS变更 -

$(function(){
    $('#menu > li, .submenu > li').hover(
        function(){
            var submenu = $(this).find('ul.submenu');
            if (submenu.hasClass('submenu')){
                submenu.removeClass('hide');
            }
        },
        function(){
            var submenu = $(this).find('ul.submenu');
            if (submenu.hasClass('submenu')){
                submenu.addClass('hide');
            }
    });
});

只要子菜单ul的目标正确即可。

Just so the submenu ul is targeted correctly.

请注意，您可以通过使用此css

Please note you can eliminate the JS by using this css

.submenu {display:none;}
#menu-area ul li:hover .submenu {display:block}

您不需要子菜单中的 .hide class

You won't need .hide class on submenu ul either

http://jsfiddle.net/BuJav/16/

这篇关于jQuery的UL LI悬停效果的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！