防止文字在盘旋时移动

问题描述：

我是flexbox的新手，尝试使用它来制作菜单。防止文字在盘旋时移动

我希望链接在用户悬停时在底部有一个漂亮的边框。但即使我设置box-sizing: border-box; flex仍会重新计算文本位置和元素“跳跃”，而不是预测的行为。我的问题是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>

答

通过在悬停时添加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>

谢谢，它看起来不错。 –

答

如果你只是设置在默认情况下使用相同的颜色，这是一个底部边框在其背景？将鼠标悬停在项目上后，只需更改颜色即可。

是的，它会工作，我也可以设置不透明度为0，将其更改为1悬停 - 这将给予同样的结果，但我不喜欢它的事实是，元素不会居中，因为它将被移动到边界大小的顶部。 –

或'border-color：transparent'。 – Oriol

答

我会用插图的box-shadow此功能。我设法通过改变:hover css来重新创建效果：

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

example here

防止文字在盘旋时移动

相关推荐