Avoid html table flickering on hover

Question

I need to avoid the html table flickering on hover. when someone is hovering a line, it shows a button, but the table seems a little strange.

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

Answer 1

Use mouseenterand mouseleave.

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 hiddenand hover over visibleit, this will avoid flickering, because the div takes up some space when you show it. At the same time, hidden visibility will still occupy space, but will not be displayed.

Demo

Answer 2

TD, .

CSS "myRow" TDs 45 .

.myRow td {
    height:45px;  
} 

Answer 3

add td2px .. or increase the height of the line - td, which can also place 8px on the button. It is currently at 8px, which leads to an increase in line height ..