jquery - CSS/JQuery : how to create submenu for table row that stays visible mousing from row onto menu?

Question

我是一个 CSS/JQuery 新手，但已经用基础构建了一些东西。只需要一些大方向。

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

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

对于我的生活，我找不到这样的例子。

Answer 1

在 tr 的 mouseenter 事件中，为该行分配“突出显示”类并显示您的菜单。

在菜单的 mouseleave 事件中隐藏菜单并从任何包含它的行中移除“highlighted”类。

类似的东西:

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

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

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