gpt4 book ai didi

css - 如何避免在悬停时展开父级 Flex 元素

转载 作者:行者123 更新时间:2023-12-02 18:37:43 25 4
gpt4 key购买 nike

我有简单的导航栏列表,我需要在悬停时更改元素字体粗细。但是,当我将鼠标悬停在元素上时,其宽度会发生变化,因此其他导航元素的位置也会发生变化。如何解决这个问题?

示例:

.container {
margin: 0 auto;
max-width: 500px;
}

.nav {
display: flex;
justify-content: space-between;
list-style: none;
text-transform: uppercase;
}

.nav__item {
font-weight: 100;
cursor: pointer;
}

.nav__item:hover {
font-weight: bold;
}
<html>
<div class="container">
<ul class="nav">
<li class="nav__item">Home</li>
<li class="nav__item">About</li>
<li class="nav__item">Contacts</li>
<li class="nav__item">Donate</li>
<li class="nav__item">FAQ</li>
</ul>
</div>
</html>

最佳答案

一个简单的方法是设置垂直或水平的 text-shadow 来模仿粗体字母,使用 skew()transform >scale(), ...也可以帮助在不让所有东西都跳跃的情况下制作效果。

带有水平文本阴影的示例

.container {
margin: 0 auto;
max-width: 500px;
}

.nav {
display: flex;
justify-content: space-between;
align-items:center;
list-style: none;
text-transform: uppercase;
}

.nav__item {
font-weight: 100;
cursor: pointer;
}

.nav__item:hover {
text-shadow: 1px 0;
}
<html>
<div class="container">
<ul class="nav">
<li class="nav__item">Home</li>
<li class="nav__item">About</li>
<li class="nav__item">Contacts</li>
<li class="nav__item">Donate</li>
<li class="nav__item">FAQ</li>
</ul>
</div>
</html>

关于css - 如何避免在悬停时展开父级 Flex 元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/68535452/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com