jQuery-在不使用图像的情况下滑动背景颜色

那么，是的，正如标题所说，有没有一种方法可以使用滑动动画来更改导航菜单项的背景色（悬停时）？和而不使用图像

使用jQuery或CSS3制作淡入淡出动画很容易，但是有没有一种方法可以让悬停颜色从左右滑动

---

我知道这方面有很多线程，但它们都包括使用图像。

您可以这样做：

HTML:

<a href="#"><span>aosgibmoa bnocibnas</span></a>

a{
    display:inline-block;
    background:green;
    position:relative;
    padding:2px 5px;
}
a>span{
    position:relative;
}

a::before{
    content:'';
    background:red;
    position:absolute;
    left:0;
    top:0;
    height:100%;
    width:0%;
    -webkit-transition:width .3s ease-out;
}
a:hover::before{
    width:100%;
}

a{
    display:inline-block;
    background:green;
    position:relative;
    padding:2px 5px;
    background: -webkit-gradient(linear, left top, right top, color-stop(50%,red), color-stop(50.001%,green));
    background-size:200% 100%;
    background-position:0 0;
    -webkit-transition:background-position .3s ease-out;
}

a:hover{
    background-position:-100% 0;
}

演示：

---

使用渐变的备选方案：（谢谢Bojangles）

CSS:

<a href="#"><span>aosgibmoa bnocibnas</span></a>

a{
    display:inline-block;
    background:green;
    position:relative;
    padding:2px 5px;
}
a>span{
    position:relative;
}

a::before{
    content:'';
    background:red;
    position:absolute;
    left:0;
    top:0;
    height:100%;
    width:0%;
    -webkit-transition:width .3s ease-out;
}
a:hover::before{
    width:100%;
}

a{
    display:inline-block;
    background:green;
    position:relative;
    padding:2px 5px;
    background: -webkit-gradient(linear, left top, right top, color-stop(50%,red), color-stop(50.001%,green));
    background-size:200% 100%;
    background-position:0 0;
    -webkit-transition:background-position .3s ease-out;
}

a:hover{
    background-position:-100% 0;
}

演示：

---

像这样：？+1非常好。我的第一个想法是使用带有0px宽挡块的CSS渐变来改变颜色，但这是better@Bojangles哇，使用渐变实际上也是一个非常棒的主意。用梯度解更新了我的答案。谢谢：）（注意：我现在的例子显然只适用于webkit）很好的解决方案！它们正是我需要的。非常感谢你！