我有简单的导航栏列表,我需要在悬停时更改项目字体粗细。但是当我将鼠标悬停在项目上时,它的宽度会发生变化,因此其他导航项目的位置也会发生变化。如何解决这个问题?
示例:
.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>
答案 0 :(得分:4)
一个简单的方法是设置垂直或水平 text-shadow
来模仿粗体字母,transform
与 skew()
或 scale()
,...让每件事都跳起来。
带有水平 text-shadow
的示例
.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>
答案 1 :(得分:1)
这应该能帮到你: Inline elements shifting when made bold on hover
虽然本例中没有使用 flex,但投票最高的解决方案应该证明是一个可行的解决方案,因为 li 元素的宽度不会对字体粗细变化引起的宽度变化做出反应。