jQuery ul li 悬停效果

Posted 2023-03-06

【中文标题】jQuery ul li 悬停效果

【英文标题】：jQuery ul li hover effect

【发布时间】：2013-02-10 16:59:13

【问题描述】：

我有this code here，我正在尝试在ul#menu li 悬停事件上显示嵌套的.submenu 列表。如果您可以看到ul.submenu 位于li 内部，但由于某种原因，当您将鼠标从实际的ul#menu li a 拖动到其嵌套的ul.submenu 时，它会消失，就好像您要移出它一样.我不明白为什么会这样。

我尝试过更改 DOM 以及使用 setTimeout，但没有成功。

关于如何完成这项工作的任何想法？更重要的是……为什么会出现我的问题？我的意思是，既然ul.submenu 位于内部，那么li 不应该被视为同一个悬停区域吗？

【问题讨论】：

Seems to work just fine in Chrome 25.

我注意到子菜单和父菜单之间存在差距。当您快速移动鼠标时，它不会隐藏子菜单。这告诉我，当你的鼠标碰到那个间隙时，它会运行代码来隐藏菜单，因为你不再将鼠标悬停在父菜单上。

@Chris Cooney：是的，我也注意到了。关于如何克服这个问题的任何想法？

我知道这不是一个理想的解决方案，但也许只是让您的菜单更宽。您不需要更改它的外观，但是如果您更改 UL 元素的实际宽度，同时保持外观相同，它可能会阻止鼠标落在列表之外？或者，删除列表之间的填充。还注意到悬停效果在列表项上运行。当鼠标退出列表项时，它也将隐藏菜单。删除列表项边缘的间隙以填充菜单的宽度可能会起作用。

【参考方案1】：

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

解决此问题的一个简单方法是将.submenu 包装在div 中，该div 的宽度足以充当菜单项和子菜单之间的桥梁。

看这里-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');
            
    );
);

这样子菜单的目标就正确了。

---

请注意，您可以使用此 css 消除 JS

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

子菜单上的.hide 类也不需要

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

【讨论】：

非常简单和精细的解决方案，也很好解释！谢谢！ :)

【参考方案2】：

我不知道它在您当前的项目中是否被认为可以接受，但您可以做一个快速修复：

menu-area ul li a
   width: 100%;
   color: #F2F2F2;
   display: block;
   padding-right:10%;

您可以将值更改为您想要的任何 % 以解决您的需求。只要做到这一点，以确保满足子菜单区域。我没有费心检查确切的值。让我知道它是否有效！

【参考方案3】：

试试这个：http://jsfiddle.net/UFevL/6/

html

<div id="menu">
    <ul>
        <li class="active">
            <a href="?l=EL&amp;m=932K59EciV">Menu #1</a>
        </li>
        <li>
            <a href="?l=EL&amp;m=M-z-3crmAP">Menu #2</a>
        </li>
        <li>
            <a href="?l=EL&amp;m=jpHiTwH1bT">Menu #3</a>
        </li>
        <li>
            <a href="?l=EL&amp;m=Jwr0SIWoWX">Menu #4</a>
        </li>
        <li>
            <a href="?l=EL&amp;m=QY8SgMl5JH">Menu #4</a>
        </li>
        <li>
            <a href="?l=EL&amp;m=8GaCmPByu3">Menu #5</a>
        </li>
        <li>
            <ul>
                <li>
                    <a href="?l=EL&amp;m=ueHp2vYKUa">Submenu #1</a>
                </li>
                <li>
                    <a href="?l=EL&amp;m=HQvyKxum8q">Submenu #2</a>
                </li>
                <li>
                    <a href="?l=EL&amp;m=81cDaTOCsL">Submenu #3</a>
                </li>
            </ul>
            <a href="?l=EL&amp;m=BQMppfQ0Dl">Menu #6</a>
        </li>
        <li>
            <a href="?l=EL&amp;m=D3wTd4F5Mn">Menu #7</a>
        </li>
    </ul>
</div>

CSS

#menu ul 
    width: 160px;
    padding: 4px;
    margin: 0;
    border: 2px solid #94AA13;
    background-color: #fff;
    border-radius: 4px;


#menu li 
    position: relative;
    padding: 0;
    margin: 0;


#menu li + li 
    margin-top: 4px;


#menu a 
    display: block;
    padding: 0 20px;
    font-size: 14px;
    line-height: 36px;
    color: #f2f2f2;
    background-color: #283720;
    border-radius: 4px;


#menu li > ul 
    display: none;
    position: absolute;
    top: 0;
    left: 100%;
    margin: -4px 0 0 10px;


#menu li:hover > ul 
    display: block;


#menu li:hover > ul:before 
    display: block;
    content: "";
    position: absolute;
    top: 0;
    left: -10px;
    width: 10px;
    height: 100%;

JS...无！

诀窍在于 :before 元素：http://caniuse.com/#search=before

如果不能使用，请尝试添加一个虚拟 div。