<a>元素:hover效果失效排查：嵌套<li>中无法触发translateY

代码片段 #

CSS代码：

a {
  cursor: pointer;
  text-decoration: none;
  font-family: 'Ubuntu', sans-serif;
  font-size: 1.2rem;
  font-weight: bold;
  color: white;
  transition: all 0.3s ease-in;
}

a:hover {
  color: aquamarine;
  transform: translateY(-10px)
}

HTML代码：

<nav id="navbar">
  <a id="nav-brand" href="">MrinB</a>
  <div id="div-items">
    <ul id="ul-items">
      <li class="li-items"><a id="a" href=""> Home</a></li>
      <li class="li-items"><a id="a" href="">Contact</a></li>
      <li class="li-items"><a id="a" href="">About Me</a></li>
    </ul>
  </div>
</nav>

问题原因 #

核心问题是**标签默认是inline行内元素**，CSS的transform属性不支持作用在inline元素上——只有块级元素（block）、行内块元素（inline-block）、弹性容器/子元素等非inline类型的元素，才能正常应用transform变换。而

解决方案 #

给标签设置display: inline-block或display: block，让它成为支持transform的元素类型：

a {
  cursor: pointer;
  text-decoration: none;
  font-family: 'Ubuntu', sans-serif;
  font-size: 1.2rem;
  font-weight: bold;
  color: white;
  transition: all 0.3s ease-in;
  /* 添加这行，将a转为行内块元素 */
  display: inline-block;
}

a:hover {
  color: aquamarine;
  transform: translateY(-10px);
}

额外优化建议 #

HTML中多个标签使用了相同的id="a"，这违反了HTML规范（id属性必须全局唯一），容易导致后续样式选择器、JavaScript元素选择出现异常。建议改为class属性，比如class="nav-link"：

<li class="li-items"><a class="nav-link" href=""> Home</a></li>
<li class="li-items"><a class="nav-link" href="">Contact</a></li>
<li class="li-items"><a class="nav-link" href="">About Me</a></li>