Avoid html table flickering on mouse hover

Question

I need to avoid html table flickering on mouse hover. when someone hover a row it shows a button, but the table seems a litlle bit weird.

Here is my code http://jsfiddle.net/7nqLg/2/

Answer 1

Use mouseenter and mouseleave instead.

jQuery('.myRow').mouseenter(function() {
    jQuery(this).find('div:first').css('visibility', 'visible');
}).mouseleave(function() {
    jQuery(this).find('div:first').css('visibility', 'hidden');
});

And instead of hiding the element set its visibility to hidden and on mouse over make it visible, this will avoid the flickering because the div occupies some space when you show it. Making its visibility hidden will still occupy the space but won't be displayed.

Demo