徘徊时防止文字移动 [英] Prevent text from shifting when hovered

问题描述

我希望链接在用户悬停时在底部有一个很好的边框。但是，即使我设置了 box-sizing：border-box; flex会重新计算文本的位置和元素'jumps'，而不是预测的行为。 b $ b

我有示例。我不希望我的元素内的内容跳转时，我悬停。

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

  .item {display：flex;宽度：200px; height：100px;背景：＃123;颜色：#fff; text-align：center; justify-content：center; flex-direction：column;}。item：hover {border-bottom：10px solid lightgreen; box-sizing：border-box;}  

< div类= 项 >内容< / div>

解决方案

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

一个解决方案是随时保留边界的空间。换句话说，将10px边框分解到正常状态的元素中。

此边框获取元素的背景色（或 transparent ），所以它是不可见的。

$ b

.item {display：flex ;宽度：200px; height：100px;背景：＃123;颜色：#fff; text-align：center; justify-content：center; flex-direction：column; position：relative;}。item :: after {content：;位置：绝对;底部：0;左：0;宽度：100％;我们可以通过下面的代码来实现这个功能： html lang-html prettyprint-override> < div class =item> Content< / div>

I'm new to flexbox and trying to make a menu using it.

I want links to have a nice border on the bottom when user hovers on them. But even if I set box-sizing: border-box; flex keeps recalculating text position and element 'jumps' instead of predicted behaviour.

I have an example with the problem. I don't want content inside my element to jump when I hover.

Is there any simple solution/edition to my code to make it work as expected? I know other ways of achieving what I want: set baseline, use relative/absolute positioning...

.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>

解决方案

By adding a 10px border on hover, you are changing the size of the box on hover. That will reposition surrounding elements... on hover.

One solution is to reserve the space for the border at all times. In other words, have the 10px border factored into the element in a normal state.

This border gets the element's background color (or transparent) so it is not visible. On hover, you only change the color.

.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>

这篇关于徘徊时防止文字移动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！