CSS/JQuery：如何为表格行创建子菜单，使鼠标从行到菜单保持可见？

Posted 2023-03-06

【中文标题】CSS/JQuery：如何为表格行创建子菜单，使鼠标从行到菜单保持可见？

【英文标题】：CSS/JQuery: how to create submenu for table row that stays visible mousing from row onto menu?

【发布时间】：2011-12-17 23:16:23

【问题描述】：

我是一名 CSS/JQuery 菜鸟，但我已经构建了一些基础知识。只需要一些大方向。

我有一个 html 表格（在这种情况下我不得不使用带有表格数据的表格）并且需要在悬停一行时：1）在该行周围画一条线以突出显示它，以及 2）在我悬停的单元格底部挂一个小下拉菜单。

我的问题是：如果菜单在行悬停时触发，但是您将鼠标向下悬停在菜单上，如何保持该行突出显示并且菜单处于活动状态，直到您将鼠标移出菜单？我假设当鼠标离开该行时，行突出显示和菜单本身会消失。

在我的一生中，我找不到这样的例子。

【参考方案1】：

在tr 的mouseenter 事件中，将行指定为“突出显示”类并显示您的菜单。

在菜单的mouseleave 事件中隐藏菜单并从任何包含它的行中删除“突出显示”类。

类似：

var $myMenu = $('#myMenu');

$('tr').mouseenter(function()
    $this = $(this);
    $this.addClass('highlighted');
    $myMenu.appendTo($this).slideDown();
);

$myMenu.mouseleave(function()
    $(this).slideUp();
    $('tr.highlighted').removeClass('highlighted');
);

【讨论】：

好吧，我觉得很傻。我只考虑使用 JQuery 的悬停来显示/隐藏，这会将两个操作绑定到同一个目标。我想我现在明白了。谢谢。

别觉得傻，即使是最资深的开发者有时也会忘记最明显的东西，甚至比这更明显:)

由于您使用的是 jQuery，您可能需要查看 hoverIntent 插件。这是一个很棒的插件，它可以确定用户悬停的意图，而不是仅仅根据悬停事件立即采取行动。它实际上也为您的问题内置了功能。 cherne.net/brian/resources/jquery.hoverIntent.html

为了澄清弗农的建议，悬停意图是为了延迟悬停事件，因此当用户在屏幕上移动光标时，菜单不会到处打开和关闭。跨度>

【参考方案2】：

尝试一个简单的下拉菜单，例如this one，但来自单元格。 为突出显示分配与单元格相同颜色的边框，然后在悬停时更改边框颜色。