javascript - 在 CSS 中悬停时填充 li 元素

Question

我正在尝试为 <li> 制作动画这样在悬停时就会出现从左到右的填充效果。

这就是我到目前为止所拥有的。

ul {
	list-style-type: none;
}

.hoverTest {
	float: left;
	margin-right: 1px;
}

.hoverTest li {
    width:100px;
    padding: 11px 16px;
    text-align:center;
    float:left;
    background: #ff3232;
    /* Old browsers */
    background: linear-gradient(to left, red 50%, blue 50%);
    background-size: 200% 100%;
    background-position:left bottom;
    margin-left:10px;
    transition:all 0.5s ease;
}
.hoverTest li:hover {
    background-position:right bottom;
}
.hoverTest li a {
    color:white;
}

   <div class="hoverTest">
    <ul>
	<li><a href="#">Test Button</a></li>
    </ul>
 </div>

我对此有很多问题。首先，填充效果是从右到左，而我想要相反的效果。无论我尝试如何改变背景的位置，我都无法让它发挥作用。

其次，我希望首先显示一小段填充颜色，如 Jay Holtslander 的示例所示: https://codepen.io/j_holtslander/full/XmpMEp/

最后我现在的代码似乎比较笨重，它取自 this answer 2013 年由 Beardhatcode 发布。有没有更现代、更简单的方法来实现这种效果？

Answer 1

我改变了背景位置，并使红色背景比蓝色背景大一点，这似乎达到了预期的效果。

ul {
	list-style-type: none;
}

.hoverTest {
	float: left;
	margin-right: 1px;
}

.hoverTest li {
    width:100px;
    padding: 11px 16px;
    text-align:center;
    float:left;
    background: #ff3232;
    /* Old browsers */
    background: linear-gradient(to right, red 52%, blue 48%);
    background-size: 200% 100%;
    background-position:right bottom;
    margin-left:10px;
    transition:all 0.5s ease;
}
.hoverTest li:hover {
    background-position:left bottom;
}
.hoverTest li a {
    color:white;
}

	<div class="hoverTest">
		<ul>
			<li><a href="#">Test Button</a>
			</li>
		</ul>
	</div>

看看更新后的 fiddle :https://jsfiddle.net/jdLysrn2/1/