Question

我正在使用表创建一个下拉菜单。我正在添加jQueryUI提供的“ui-state-highlight”类用于行突出显示。

我的问题是，现在，只要项目突出显示，就会使菜单的大小改变几个像素。我试图使用填充来解决这个问题，但它似乎不起作用。 JSFiddle

更一般地说，如何调整元素的样式以在调整子元素大小时保持相同的宽度/高度而不显式设置高度和宽度？

Answer 1

你得到的震动效果是因为1px的边界。您在mouseenter中添加了边框，并在导致该效果的mouseleave中删除了边框。

你可以通过便宜的技巧来避免它，

 //Change white if the background color of your screen is different.
 tr { border: 1px solid white; }

修改：您可以使用透明色，以避免与背景颜色匹配。

tr { border: 1px solid transparent; }

Answer 2

更新

为TR元素添加一个新样式，这是一个与容器背景相匹配的“不可见”边框。然后在悬停时，它不会添加到高度，而是边框颜色正在改变。

tr { border:#fff solid 1px; }