CSS 创建边框但不影响内容的悬停效果

在本文中，我们将介绍如何使用CSS的:hover伪类来创建一个在悬停时显示边框但不影响内容的效果。

阅读更多：CSS 教程

什么是:hover伪类？

在CSS中，:hover是一个伪类，它表示当鼠标悬停在某个元素上时应用的样式。通过使用:hover，我们可以在用户悬停在元素上时添加一些特殊的效果和样式。

创建边框效果

使用CSS的border属性可以为元素添加边框。我们可以通过将:hover伪类与border属性结合使用，使元素在悬停时显示边框。下面是一个示例：

.box {
  width: 200px;
  height: 200px;
  background-color: #eaeaea;
  transition: border 0.3s;
}

.box:hover {
  border: 1px solid red;
}

在上面的示例中，我们创建了一个名为.box的元素，并为其设置了宽度、高度和背景颜色。当用户悬停在这个元素上时，它的边框将变成红色。

边框影响内容的问题

在上面的示例中，当边框显示时，元素的大小也会随之改变。这可能会导致页面布局发生移动和调整，使用户体验变得不稳定。但是，我们可以通过使用CSS的box-sizing属性来解决这个问题。

box-sizing属性用于控制元素的盒模型。默认情况下，元素的盒模型包括内容、内边距和边框，这意味着当我们为元素添加边框时，元素的实际大小会发生改变。通过将box-sizing属性设置为border-box，我们可以确保元素的大小不会受到边框的影响。

.box {
  width: 200px;
  height: 200px;
  background-color: #eaeaea;
  transition: border 0.3s;
  box-sizing: border-box;
}

.box:hover {
  border: 1px solid red;
}

现在，当我们在悬停时显示边框时，元素的大小将保持不变，不会影响布局。

使用伪元素创建边框

除了使用border属性，我们还可以使用CSS的伪元素来创建边框效果。伪元素允许我们在元素的内容之前或之后插入自定义的内容。

下面是一个使用伪元素创建边框效果的示例：

.box {
  width: 200px;
  height: 200px;
  background-color: #eaeaea;
  position: relative;
}

.box::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 1px solid red;
  opacity: 0;
  transition: opacity 0.3s;
}

.box:hover::before {
  opacity: 1;
}