我實現的錨標簽懸停效果的CSS解決方案是替換導航鏈接列表中的其他列表項。

我希望列表中的其他項目保持不變。

:root {
  --fs-600: 1rem;
  --fs-700: 1.25rem;
  --clr-accent-400: red;
}
.nav-list a {
  text-decoration: none;
  color: rgb(169, 125, 169);
  font-size: var(--fs-600);
  transition: background-color 0.3s ease-in-out, font-size 0.3s ease-in-out;
}

.nav-list a:hover,
.nav-list a:focus {
  color: var(--clr-accent-400);
  font-size: var(--fs-700);
}

<ul aria-label="Primary" role="list" class="nav-list">
  <li><a href="#">About me</a></li>
  <li><a href="#">Reiki</a></li>
  <li><a href="#">Training</a></li>
  <li><a href="#">Appointments</a></li>
  <li><a href="#">Shop</a></li>
</ul>

簡單的解決方案是給阿利固定的高度var( - fs-700)。這樣，懸停時它的高度就能與字體大小相適應:

/* added by editor for demo purpose */
:root {
  --fs-600: 1em;
  --fs-700: 1.5em;
}


/* original CSS */
.nav-list a {
  text-decoration: none;
  color: rgb(169, 125, 169);
  font-size: var(--fs-600);
  transition: background-color 0.3s ease-in-out, font-size 0.3s ease-in-out;
}

.nav-list a:hover,
.nav-list a:focus {
  color: var(--clr-accent-400);
  font-size: var(--fs-700);
}


/* added CSS as solution */
.nav-list li {
  height: var(--fs-700);
}

<menu aria-label="Primary" role="list" class="nav-list">
  <li><a href="#">About me</a></li>
  <li><a href="#">Reiki</a></li>
  <li><a href="#">Training</a></li>
  <li><a href="#">Appointments</a></li>
  <li><a href="#">Shop</a></li>
</menu>