在锚点上触发 jQuery 的 hover() 以显示包含 LI 的下拉菜单？

Posted 2023-05-08

【中文标题】在锚点上触发 jQuery 的 hover() 以显示包含 LI 的下拉菜单？

【英文标题】：Trigger jQuery's hover() over anchor to show drop-downs within containing LIs?

【发布时间】：2011-10-22 22:45:16

【问题描述】：

我有一个水平导航栏，它是一个带有锚标签的无序列表。它目前使用 jQuery 的悬停（鼠标悬停和鼠标悬停）在每个 LI 中显示下拉导航。

我怎样才能做到这一点，而不是在将鼠标悬停在 LI 上时触发下拉菜单，而是在将鼠标悬停在锚标记上时触发下拉菜单？当我将它更改为锚点时，下拉菜单总是在将鼠标悬停在其顶部时消失，但是当我将 LI 设置为 hover() 的目标时它工作正常（我猜是因为所有的下拉代码包裹在 LI 中，因此光标仍悬停在 LI 上）。

由于设计原因，我需要这样设置，所以没有办法改变它。我需要仅从锚点而不是 LI 触发 hover()。

【问题讨论】：

你能把代码托管在 jsfiddle 上吗？无法想象问题

【参考方案1】：

您可以通过锚点的悬停代码更改 LI 的类。离开 LI 时将其改回。

【参考方案2】：

如果我理解正确，您遇到的问题是下拉菜单在您将鼠标移到它之前关闭。这可能是因为锚标记和下拉菜单之间存在间隙。

那么，您将开启器更改为 a-tag，然后添加一个小计时器，即使您将鼠标移出，也可以让下拉列表保持打开一秒或多秒？无论如何，这样的添加还是不错的，如果您不小心将鼠标移出导航栏并且由于它关闭而不得不返回，则会令人恼火。

编辑：另外，是的，JSFiddle 它。

【参考方案3】：

尝试在你的锚点内放置一个 span 标签：

<a href='#'><span>test</span></a>

a span 
    display: block;