jquery - jQuery - 不使用图像滑动背景颜色

Question

所以，是的，正如标题所说 - 有没有办法使用滑动动画更改导航菜单项的背景颜色（悬停时）？并且不使用图像？

使用 jQuery 或 CSS3 制作渐变动画很容易，但是有没有办法让悬停颜色从左向右滑动？

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

Answer 1

你可以这样做：

HTML：

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

CSS：

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%;
}

演示：http:
//jsfiddle.net/nsfxE/

---

使用渐变的替代方法：（感谢 Bojangles）

CSS：

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;
}

演示：http:
//jsfiddle.net/nsfxE/1/