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

发布于03月08日

我有一个行，我正在悬停时对其应用背景高亮显示.

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

然而，当边框向元素添加1pxadditional时，它会使元素"移动".我如何补偿上面的移动(不使用背景图像)？

推荐答案

您可以使边框透明.这样它就存在了，但它是看不见的，所以它不会推动任何东西:

.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>

向现有边框添加宽度的另一个可能的技巧是使用所需像素宽度的扩展属性添加一个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>

Css相关问答推荐

基于子元素的子元素数量的样式元素

Mat-Form-字段占用更多区域，导致其他控件远离它

我应该在哪里放置expo /Reaction本地项目的CSS重置文件？

如何通过重复的网格区域来简化网格布局？

当鼠标移到侧边栏之外时，如何防止shiny 仪表板侧边栏菜单中的 pickerInput 选项被切断？

根据选项 colored颜色更改 Select 文本 colored颜色

Flexbox 子高度它的内容

在表格中使用自动换行：断词

如何将 textarea 宽度扩展到父级宽度的 100%(或如何将任何 HTML 元素扩展到父级宽度的 100%)？

css3 nth 类型限制为类

如何使用 Gulp 复制多个文件并保持文件夹 struct

范围内的 CSS 未在组件中应用

CSS Select /样式第一个词

弹性框中的边距折叠

为什么浏览器会为 CSS 属性创建供应商前缀？

css 中的 clearfix 类有什么作用？

Unicode 通过 CSS ：before

对象拟合不影响图像

仅使用 CSS 交换 DIV 位置

如何实现最大字体大小？

实用课程推荐