当前位置：文江博客话题详情

当鼠标退出 div 区域时自动折叠下拉导航

发布于 2024-11-14 10:58:58 字数 457 浏览 1 评论 0原文

我制作了一个简单的下拉导航，当您将鼠标悬停在链接上时，该导航会展开。

当鼠标悬停在链接上时，绝对定位的 div 将展开，显示子导航。我的问题是，当鼠标离开导航区域时，这个 div 不会自动折叠，而这正是我需要发生的。

我已将 onMouseover 命令添加到导航中的其他链接，该命令将在激活时折叠 div，但我真正需要的功能是当鼠标离开 div 区域时下拉 div 折叠。

我非常感谢对此的任何帮助。

------编辑-----

感谢您的帮助@Tuanderful。我以一种不优雅（但有效）的方式解决了这个问题。

我只是将带有关闭触发器的 onmouseover 事件添加到导航下方和上方的 div 中。这样，当用户的光标离开下拉导航时，触发器会触发并且下拉菜单会自动关闭。

我同意纯 CSS 方法是理想的，但由于此导航的一些其他复杂性，我不得不使用 Javascript 解决方案。

需要登录才能够评论，你可以免费注册一个本站的账号。

盛装女皇 2024-11-21 10:58:58

您可以尝试使 div#subnav1 成为嵌套列表，而不是使 #subnav1 成为 #nav 的同级；您的导航结构将如下所示：

<ul>
    <li>About</li>
    <li>Products
        <ul>
            <li>Booster</li>
            ....
        </ul>
    </li>
</ul>

然后您可以使用 CSS（而不是 javascript）来控制子导航的隐藏和显示。这可以通过 :hover 伪选择器来完成。

该方法是最初隐藏子菜单

ul ul { 显示：无 }

当用户鼠标悬停在主菜单项上时，使用 :hover 选择器显示子菜单

li:hover ul { 显示: 块 }

如果您决定更改 HTML 结构，您可能需要继续适当地完善 CSS/图像，以使所有内容都到位。

Instead of making #subnav1 a sibling of #nav, you can try make div#subnav1 a nested list; your nav structure would look like:

<ul>
    <li>About</li>
    <li>Products
        <ul>
            <li>Booster</li>
            ....
        </ul>
    </li>
</ul>

Then you can use CSS (instead of javascript) to control the hiding and showing of the sub-nav. This can be done with the :hover pseudo-selector.

The approach is to initially hide the submenu with

ul ul { display: none }

When the user mouse's over the main menu's items, use the :hover selector to display the sub-menu

li:hover ul { display: block }

If you decide to change the HTML structure you may need to continue to refine your CSS/images appropriately for everything to fall into place.

A good resource that goes into this approach in further detail can be found at A List Apart: Horizontal DropDowns. An even more robust example (and slightly different approach) can be found at this CSS Wizardry article on Creating a Pure CSS Dropdown Menu

~没有更多了~