Question

我是flexbox的新手，并尝试使用它制作一个菜单。

当用户将鼠标悬停在底部时，我希望链接在底部有一个漂亮的边框。但即使我设置box-sizing: border-box; flex仍会重新计算文本位置和元素'jumps'而不是预测的行为。

我遇到了example问题。当我悬停时，我不希望元素内的内容跳转。

我的代码是否有任何简单的解决方案/版本可以按预期工作？我知道实现我想要的其他方法：设置基线，使用相对/绝对定位......

.item {
  display: flex;
  width: 200px;
  height: 100px;
  background: #123;
  color: #fff;
  text-align: center;
  justify-content: center;
  flex-direction: column;
}
.item:hover {
  border-bottom: 10px solid lightgreen;
  box-sizing: border-box;
}

<div class="item">
  Content
</div>

Answer 1

通过在悬停时添加10px边框，您将在悬停时更改框的大小。这将重新定位周围的元素......在悬停时。

一种解决方案是始终为边框预留空间。换句话说，将10px边界考虑在正常状态的元素中。

此边框获取元素的背景颜色（或transparent），因此不可见。悬停时，您只需更改颜色。

.item {
  display: flex;
  width: 200px;
  height: 100px;
  background: #123;
  color: #fff;
  text-align: center;
  justify-content: center;
  flex-direction: column;
  position: relative;
}
.item::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  border-bottom: 10px solid #123;
}
.item:hover::after {
  border-bottom: 10px solid lightgreen;
}

<div class="item">Content</div>

Answer 2

我会在此功能中使用插入框阴影。我设法通过将:hover css更改为：

来重新创建效果

.item:hover {
  box-shadow: inset 0 -10px lightgreen;
}

example here

Answer 3

如果您只是使用背景上的相同颜色默认设置底部边框，该怎么办？将鼠标悬停在商品上后，只需更改颜色即可。

阻止文本在悬停时移动

3 个答案: