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/

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

1 个答案: