如何在悬停时添加CSS边框,而不移动元素?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (90)

我有一行,我正在应用背景突出显示在悬停。

.jobs .item:hover {
    background: #e1e1e1;
    border-top: 1px solid #d0d0d0;
}

然而,随着边境增加了1px的额外的元素,它使得元素“移动”。我要如何修正上述移动(不使用背景图像)?

提问于
用户回答回答于

你可以使边框存在,但其颜色与背景颜色相同(或transparent

.jobs .item {
    background: #eee;
    border-top: 1px solid #eee;
}

.jobs .item:hover {
    background: #e1e1e1;
    border-top: 1px solid #d0d0d0;
}
用户回答回答于

添加margin:-1px;减少1px到每一边。或者如果你只需要一边你可以做margin-left:-1px等等。

扫码关注云+社区

领取腾讯云代金券