html - 跨度悬停时填充文字效果

Question

我试图通过从左到右逐渐填充来更改悬停时链接的颜色。然而，它似乎并没有起作用，它只是立即填充文本？

我正在尝试让它在有人将鼠标悬停在 li 上时，开始填充 span

body {
  background-color: #000;
}

ul {
  list-style-type: none;
}

a {
  text-decoration: none;
  color: #999;
  font-size: 40px;
}

.navbar_wrapper-li {
  display: block;
  flex: 0 1 auto;
  user-select: none;
}

span {
  left: 50%;
  top: 50%;
  position: absolute;
  transform: translate(-50%, -50%);
}

.navbar_wrapper-li:hover span:before {
  width: 0;
  color: #FFFFFF;
  overflow: hidden;
  position: absolute;
  content: attr(data-text);
  transition: all 0.9s;
}

.navbar_wrapper-li:hover span:hover:before {
  width: 100%;
}

<ul class="navbar_wrapper-ul">
  <li class="navbar_wrapper-li">
    <a class="nav-link active" href="#">
      <span data-text="Home">Home</span>
    </a>
  </li>
</ul>

Answer 1

您只需悬停在 span 而不是 li 和 span 两者上，因为悬停在 li 和 span 上是冲突的

body {
  background-color: #000;
}

ul {
  list-style-type: none;
}

a {
  text-decoration: none;
  color: #999;
  font-size: 40px;
}

.navbar_wrapper-li {
  display: block;
  flex: 0 1 auto;
  user-select: none;
}

span {
  left: 50%;
  top: 50%;
  position: absolute;
  transform: translate(-50%, -50%);
  display: block;
}

.navbar_wrapper-li span:before {
  width: 0;
  color: #FFFFFF;
  overflow: hidden;
  position: absolute;
  content: attr(data-text);
  transition: all 0.9s;
}

.navbar_wrapper-li span:hover:before {
  width: 100%;
}

<ul class="navbar_wrapper-ul">
  <li class="navbar_wrapper-li">
    <a class="nav-link active" href="#">
      <span data-text="Home">Home</span>
    </a>
  </li>
</ul>