CSS悬停动画隐藏文本

Question

如果我切换悬停效果，背景会隐藏文字。我要补充一点，我补充说，listpoints的文本不在“：before”背景下。

我还提供了一个codepen-link，因此您可以轻松查看我的代码。

由于

   <nav>
    <ul>
      <li>#1111111111</li>
      <li>#2222222222</li>
      <li>#3333333333</li>
    </ul>
  </nav>


nav {
  position: absolute;
  top: 0;
  bottom: 0;
  background-color: #2c3e50;
  width: 100px;
}

nav ul {
  margin: 0;
  padding: 0;
}

nav ul li {
  border-bottom: 1px solid #ecf0f1;
  padding: 10px 0 10px 0;
  position: relative;
  color: red;
}

nav ul li:hover {
  color: green;
}

nav ul li:before {
  position: absolute;
  content: '';
  top:0;
  left: 0;
  width: 0;
  height: 100%;
  background-color: white;
  transition:all 0.3s ease;
  z-index: 0;

}

nav ul li:hover::before {
  width: 100%;
}

Codepen：http://codepen.io/anon/pen/oBXwVB

Answer 1

您可以使用linear-background实现此效果并避免使用:before选择器，这似乎是一种更好的方法。

例如

li {
  background: linear-gradient(to right, red 50%, blue 50%);
  background-size: 200% 100%;
  background-position:left bottom;
  transition: all 1s ease-in-out;
}

li:hover {
  background-position:right bottom,
}

正如此堆栈中的beardheadcode所示：Fill background color left to right CSS

虽然有一个演示： http://jsfiddle.net/75Umu/3/

Answer 2

问题是，叠加层位于文本顶部并隐藏下面的内容，因为它是一个白色的不透明背景。只能使用其他<span>并将z-index设置为比叠加层更高的位置：

nav {
  position: absolute;
  top: 0;
  bottom: 0;
  background-color: #2c3e50;
  width: 100px;
}
nav ul {
  margin: 0;
  padding: 0;
}
nav ul li {
  border-bottom: 1px solid #ecf0f1;
  padding: 10px 0 10px 0;
  position: relative;
  color: red;
}
nav ul li:hover {
  color: green;
}
nav ul li:before {
  position: absolute;
  content: '';
  top: 0;
  left: 0;
  width: 0;
  height: 100%;
  background-color: white;
  transition: all 0.3s ease;
}
nav ul li:hover::before {
  width: 100%;
}
nav ul li span {
  position: relative;
  z-index: 99;
}

<nav>
  <ul>
    <li><span>#1111111111</span></li>
    <li><span>#2222222222</span></li>
    <li><span>#3333333333</span></li>
  </ul>
</nav>

预览