CODEWITHSUNDEEP
jqueryhtmlcsstwitter-bootstrap
Otto
Otto

Reputation: 4200

Avoid html table flickering on mouse hover

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/

Upvotes: 5

Views: 2139

Answers (3)

ShankarSangoli
ShankarSangoli

Reputation: 69915

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

Upvotes: 4

Vivek Chandra
Vivek Chandra

Reputation: 4358

make the padding of the td 2px.. or increase the height of the row -- td which can accommodate the 8px on the button aswell.. its currently at 8px,hence causeing the increase in the height of the row..

Upvotes: 0

Diodeus - James MacFarlane
Diodeus - James MacFarlane

Reputation: 114417

You need to set the default height of the TD to match the maximum height on a row when the extra elements are exposed.

So the CSS for "myRow" TDs need to have a min-height of 45 pixels.

.myRow td {
    height:45px;  
}

Upvotes: 0

Related Questions