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/

最后，我目前的代码似乎相对笨重，它是在2013年由this answer取得的beauhatcode。是否有更现代，更简单的方法来实现这种效果？

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>

看看更新的小提琴：https://jsfiddle.net/jdLysrn2/1/

Answer 2

您可以使用带有插入值的box-shadow css属性来实现此目的。

ul {
	list-style-type: none;
}

.hoverTest {
	float: left;
	margin-right: 1px;
}

.hoverTest li {
    width:100px;
    padding: 11px 16px;
    text-align:center;
    float:left;
    background: blue;
    /* Old browsers */
    box-shadow: inset 5px 0px 0px red;
    transition: 1s ease;
}
.hoverTest li:hover {
    box-shadow: inset 140px 0px 0px red;
}
    
}
.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>

Answer 3

试试这个，它会起作用：

.hoverTest li {
   background: linear-gradient(to left, blue 50%, red 50%);
   border-left:3px solid red;
}
.hoverTest li:hover {
    background-position:left;
}

Answer 4

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;
    background: linear-gradient(to right, red 50%, blue 50%);
    background-size: 200% 100%;
    background-position: right;
    margin-left: 10px;
    transition: all 0.5s ease;
}
.hoverTest li:hover {
    background-position: left;
}
.hoverTest li a {
    color:white;
}






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

Answer 5

试试这个：

ul {
    list-style: none;
    padding: 0;
    background: blue;
    display: inline-block;
}

li {
    position: relative;
}

li:before {
    background-color: red;
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 3px;
    transition: width 500ms ease;
}

li:hover:before {
   width: 100%;
}

a {
    text-decoration: none;
    color: #FFF;
    display: inline-block;
    position: relative;
    padding: 20px;
}

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

在CSS中悬停时填充li项

5 个答案: