避免鼠标悬停时html表闪烁

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.

我需要避免鼠标悬停时html表闪烁。当有人徘徊在一排时，它会显示一个按钮，但桌子似乎有些奇怪。

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

这是我的代码http://jsfiddle.net/7nqLg/2/

3 个解决方案

#1

Use mouseenter and mouseleave instead.

请改用mouseenter和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 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.

而不是隐藏元素设置隐藏和鼠标上的可见性使其可见，这将避免闪烁，因为div显示它时占用一些空间。隐藏其可见性仍将占用空间但不会显示。

Demo

演示

#2

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

当需要暴露额外元素时，您需要设置TD的默认高度以匹配行上的最大高度。

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

因此，“myRow”TD的CSS需要具有45像素的最小高度。

.myRow td {
    height:45px;  
}

#3

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..

使td 2px的填充..或增加行的高度 - td可以容纳按钮上的8px以及它当前为8px，因此导致行的高度增加..

#1