19

情况

我目前正在构建一个站点，并希望在将鼠标悬停在某些元素上时创建一个边框/轮廓。这很简单，可以工作。如需参考，请参阅Stagin 区域链接中的暂存站点。我正在使用最新引导程序的网格部分和 box-sizing 模型。

问题

我发现在悬停时，被悬停的内容下方的内容被“推”到下一个元素下方。使用 stagin 区域作为参考，我可以通过 CSS 更改行为以在左侧或右侧修复此问题，但不能同时进行。

代码

这是我用来制作效果的 CSS 片段：

.hover-border:hover {
   border: 3px solid #3A3A3A;
   display: block;
}

使用此方法，除第一个元素外的任何内容都按预期运行。如果我尝试下一个片段，第一个元素可以工作，但是其他元素会中断：

.hover-border:hover {
    border: 3px solid #3A3A3A;
    display: block;
    margin-top: -6px;
}

为了澄清继承的属性，我已将相关元素的边距/填充设置为“0！重要”以实现标准行为，直到悬停

问题

如何阻止下面的元素被推送？

4

6 回答 6

44

就个人而言 - 我会采取以下方式：

.hover-border {
  border: 3px solid transparent;
  display: block;
}

.hover-border:hover {
  border: 3px solid #3A3A3A;
}
于 2013-09-19T05:58:07.410 回答
7

The best solution to these issues is to use the box-sizing:border box property

* {box-sizing:border-box;}

Then elements will retain whatever size you define but it will now INCLUDE borders and padding.

于 2013-09-21T18:36:40.507 回答
5

另一种代码更少的解决方案：

.hover-border:hover{
  box-shadow: inset 0 0 0 3px #3a3a3a;
}
于 2020-01-22T17:16:00.913 回答
2

试试这会奏效。

.hover-border {
border: 3px solid transparent;
display: block;

}
.hover-border:hover{
border: 3px solid #3a3a3a;
}

或者

a.no-decoration, a.no-decoration img {
border: medium none;
color: inherit;
cursor: pointer;
outline: medium none;
text-decoration: none;
display: block; /*Added*/
border: 3px solid transparent; /*Added*/
}
于 2013-09-19T05:59:47.550 回答
2

当尺寸很重要时，边框很难处理。我发现使用 box-shadow 效果更好，它只会改变背景，因此不会占用任何大小。

https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow?v=a

于 2017-10-16T18:28:21.573 回答
0

这将起作用：

.hover-border:hover {
  outline: solid 4px #78CF82;
}

“因为轮廓属性不是元素尺寸的一部分；元素的总宽度和高度不受轮廓宽度的影响。”

于 2021-11-15T21:40:37.397 回答