在悬停时添加CSS边框，而不移动元素[duplicate]

作者
这个问题在这里已经有答案了：
CSS悬停边框使内联元素稍微调整

（13个答案）

去年关闭了

我有一行正在悬停时应用背景高光

.jobs.项目：悬停{
背景：#e1e1；
边框顶部：1px实心#d0；
}

但是，当边框向元素添加1px附加值时，它会使元素“移动”。我如何补偿上面的移动（不使用背景图像）

可以使边框透明。通过这种方式，它存在，但不可见，因此它不会推动任何东西：

.jobs.item{
背景：#eee；
边框：1px实心透明；
}
.jobs.item:悬停{
背景：#e1e1；
边框：1px实心#d0；
}
&lt；div class=“jobs”&gt；
&lt；div class=“项目”&gt；项目&lt/部门&gt；
&lt/部门&gt

对于已经有边框且不希望移动的图元，可以使用负边距：

.jobs.item{
背景：#eee；
边框：1px实心#d0；
}
.jobs.item:悬停{
背景：#e1e1；
边框：3倍实心#D0；
保证金：-2px；
}
&lt；div class=“jobs”&gt；
&lt；div class=“项目”&gt；项目&lt/部门&gt；
&lt/部门&gt

向现有边框添加宽度的另一个可能技巧是添加具有所需像素宽度的扩展属性的框阴影

.jobs.item{
背景：#eee；
边框：1px实心#d0；
}
.jobs.item:悬停{
背景：#e1e1；
盒影：0 2px#d0d0；
}
&lt；div class=“jobs”&gt；
&lt；div class=“项目”&gt；项目&lt/部门&gt；
&lt/部门&gt

相关文章：

  1. 如何使浮动元素居中？
  2. 用于Firefox的自定义CSS滚动条
  3. 大纲对文本的影响
  4. 如何调整单个flexbox项（覆盖调整内容）[重复]

发表评论

© 2026 开发百科-程序代码问答平台 • Built with