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

我改变了 background-position 并使 red 背景比蓝色背景大一点，这似乎达到了预期的效果。

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/