CSS悬停创建边框但推送内容

Posted 2023-03-06

【中文标题】CSS悬停创建边框但推送内容

【英文标题】：css hover creating border but pushing content

【发布时间】：2013-09-24 02:06:44

【问题描述】：

情况

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

问题

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

代码

这是我用来制作效果的 CSS 的 sn-p：

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

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

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

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

问题

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

【问题讨论】：

你能提供一个jsFiddle吗？

【参考方案1】：

就个人而言，我的想法是：

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


.hover-border:hover 
  border: 3px solid #3A3A3A;

【讨论】：

我也正要发布这个。这是您想要达到的目标，默认创建一个边框，但将其设置为透明或它所在的背景颜色。这样一来，空间就已经占了，悬停只会将边框更改为可见

这就像一个魅力，谢谢。尝试学习一些关于 CSS 工作方式的新知识。假设在初始页面渲染方面，定义这 3 个像素意味着任何子元素都可以正确继承，这就是它可以在悬停时正确渲染的原因，我是否正确？

想象你的元素的内容是 100px X 100px 开始。边框环绕内容 - 为您提供 106px X 106px 的元素。如果边框仅在 :hover 上存在，则每次鼠标悬停时都会留下一个调整大小的元素。快速解决方法是定义边框开始，但使其透明:)

【参考方案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*/

【参考方案3】：

解决这些问题的最佳方法是使用 box-sizing:border box 属性

* box-sizing:border-box;

然后元素将保留您定义的任何大小，但它现在将包括边框和填充。

【讨论】：

这并不总是有效，我真的不知道为什么。 CSS 很奇怪。

我以为它会起作用，但实际上并没有。这就是我在这里的原因。

【参考方案4】：

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

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

【参考方案5】：

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

.hover-border:hover
  box-shadow: inset 0 0 0 3px #3a3a3a;

【参考方案6】：

这将起作用：

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

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