logo标签列表

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

layouthovercss
24

情况

我目前正在构建一个网站，希望在鼠标悬停在某些元素上时创建边框/轮廓。这很容易实现。有关参考，请参见暂存站点：Staging Area Link。我正在使用最新的Bootstrap中的网格部分和盒模型。

问题

我发现，在悬停时，被悬停的下面的内容会被“推”到下一个元素的下面。使用暂存站点作为参考，我可以通过CSS更改行为以解决左侧或右侧的问题，但不能同时解决两个问题。

代码

这是我用来实现效果的CSS片段：

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

使用这种方法时，除第一个元素外，其他元素的表现都符合预期。如果我尝试下面的代码段，第一个元素会正常工作，但其他元素则无法正常工作:

使用此方法后，除了第一个元素以外，其他元素的效果都是符合预期的。如果我尝试下面的代码片段，则第一个元素可以正常运行，但其他元素会出现问题：
.hover-border:hover {
    border: 3px solid #3A3A3A;
    display: block;
    margin-top: -6px;
}
为了澄清继承属性，我已将相关元素的margin/padding设置为'0 !important'，以达到标准行为直到悬停为止。
问题：
如何防止下面的元素被推动？
你能提供一个 jsFiddle 吗？ - chopper
不必使用边框，可以使用轮廓线代替边框 轮廓线：3像素实线，颜色为#3A3A3A； - Priyank Dave
7个回答
56

就我个人而言，我会选择类似这样的内容:

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

.hover-border:hover {
  border: 3px solid #3A3A3A;
}
我也正要发布这个。这就是你想要的目标，通过默认创建边框，但将其设置为透明或所在背景的颜色相等。这样，空间已经被考虑在内，悬停时只需将边框更改为可见即可。 - samrap
非常感谢，这个方法非常有效。我正在尝试学习一些关于CSS奇特工作方式的新知识。如果在初始页面渲染时定义了这3个像素，那么子元素会正确继承，这就是为什么可以在悬停时正确渲染的原因，我的理解是正确的吗？ - Simon
想象一下你的元素内容起始大小为100px X 100px。边框环绕着内容 - 给你一个106px X 106px的元素。如果边框只在:hover时出现，那么每次鼠标悬停在上面时都会调整元素大小。快速解决方法是先定义边框，但将其设置为透明 :) - Shylo Hana
7
最佳解决方案是使用box-sizing:border box属性来解决这些问题。
* {box-sizing:border-box;}

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

2
这并不总是有效，我真的不知道为什么。CSS很奇怪。 - oemera
2
我以为它会起作用，但实际上并没有。这就是为什么我在这里的原因。 - John Smith Optional
7

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

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

试一下，这会有效。

.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*/
}
4
3

这将有效：

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

由于轮廓线属性不是元素尺寸的一部分，因此轮廓线的宽度不会影响元素的总宽度和高度。
请注意，outline 的真正用途是为了帮助键盘用户确定焦点。虽然并不一定是错误的，但在将其过度用于装饰目的时，应非常谨慎，以免造成无法访问的问题。 - Alexander Nied
2

边框包含在盒模型中，因此会影响其相邻元素（尽管 box-sizing 应该起作用）。

相反，我们可以使用 CSS 的 outline 属性，它显然不是盒模型的一部分，因此不会影响其相邻元素。我从 outline | CSS-TRICKS 找到了这个解决方案。

.hover-border {
  display: block;
}

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

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接