Question

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

示例：

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

Answer 1

一个简单的方法是设置垂直或水平 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>

Answer 2

这应该能帮到你： Inline elements shifting when made bold on hover

虽然本例中没有使用 flex，但投票最高的解决方案应该证明是一个可行的解决方案，因为 li 元素的宽度不会对字体粗细变化引起的宽度变化做出反应。

如何避免在悬停时扩展父 flex 元素

2 个答案: