我有一行要在悬停时应用背景突出显示。
.jobs .item:hover { background: #e1e1e1; border-top: 1px solid #d0d0d0; }
然而,随着边境增加了1px的 额外 的元素,它使得“移动”。我在这里如何补偿以上动作(不使用背景图片)?
您可以使边框透明。这样,它就存在了,但却是不可见的,因此它不会推动任何事情:
.jobs .item { background: #eee; border-top: 1px solid transparent; } .jobs .item:hover { background: #e1e1e1; border-top: 1px solid #d0d0d0; }
如果您的元素具有指定的height和/或width,则还可以使用box-sizing:border- box;,因为此框模型在计算出的大小中包括了填充和边框宽度,例如:
height
width
box-sizing:border- box;
.jobs .item { background: #eee; height: 40px; box-sizing: border-box; } .jobs .item:hover { background: #e1e1e1; border-top: 1px solid #d0d0d0; }