Question

I’m a CSS/JQuery rookie, but have built several things with the basics. Just need some general direction.

I have an HTML table (I’m forced to use a table w/ tabular data in this situation) and need to, on hover of a row: 1) draw a line around the row to highlight it, and 2) hook a little dropdown menu to the bottom of the cell that I’m hovering.

My question is: if the menu gets triggered on hover of the row, but you mouse down over the menu, how do you keep the row highlighted and the menu active until you mouse off the menu? I assume the row highlighting and menu itself would disappear when mousing off the row.

For the life of me, I can’t find an example of this.

Answer 1

On the tr‘s mouseenter event, assign the row a class of “highlighted” and display your menu.

On the menu’s mouseleave event hide the menu and remove the “highlighted” class from any row which has it.

Something like :

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

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

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