CSS / JQuery: как создать подменю для строки таблицы, которая остается видимой, перемещаясь из строки в меню?

Question

Я новичок в CSS / JQuery, но создал несколько вещей с основами.Просто нужно какое-то общее направление.

У меня есть таблица HTML (в этой ситуации я вынужден использовать таблицу с табличными данными) и мне нужно при наведении на строку: 1) нарисовать линию вокругстрока, чтобы выделить его, и 2) подключить небольшое выпадающее меню к нижней части ячейки, которую я нахожу.

Мой вопрос: если меню вызывается при наведении на строку, но вы нажимаете мышьювниз по меню, как сохранить выделенную строку и меню активным, пока вы не отключите мышь?Я предполагаю, что подсветка строки и само меню исчезнут при наведении курсора на строку.

Для жизни я не могу найти пример этого.

Answer 1

Попробуйте простой выпадающий список, например , этот , но из клетки.Для выделения выделите границу одного цвета с ячейкой, затем при наведении измените цвет границы.

Answer 2

В событии 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');
});