css - 在悬停时添加 CSS 边框而不移动元素

Question

<分区>

Answer 1

您可以使边框透明。它以这种方式存在，但不可见，所以它不会插入任何东西:

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

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

<div class="jobs">
  <div class="item">Item</div>
</div>

对于已经有边框但又不想移动的元素，可以使用负边距:

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

.jobs .item:hover {
   background: #e1e1e1;
    border: 3px solid #d0d0d0;
    margin: -2px;
}

<div class="jobs">
  <div class="item">Item</div>
</div>

为现有边框添加宽度的另一个可能的技巧是添加一个具有所需像素宽度的 spread 属性的 box-shadow。

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

.jobs .item:hover {
    background: #e1e1e1;
    box-shadow: 0 0 0 2px #d0d0d0;
}

<div class="jobs">
  <div class="item">Item</div>
</div>