避免html表在鼠标悬停时闪烁

Question

我需要避免鼠标悬停时html表闪烁。当有人徘徊在一排时它会显示一个按钮，但表格看起来有点奇怪。

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

Answer 1

改为使用mouseenter和mouseleave。

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

而不是隐藏元素将其可见性设置为hidden而鼠标悬停在visible上，这样可以避免闪烁，因为div在显示时会占用一些空间。隐藏其可见性仍将占用空间但不会显示。

<强> Demo

Answer 2

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

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

.myRow td {
    height:45px;  
} 

Answer 3

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