Question

难以找到合适的教程......不知道从哪里开始：

What I am trying to build

如果将鼠标悬停在导航菜单上，您会看到每个链接背后的背景从右到左以亮粉色显示。我很难过你会如何制作这样的动画。有人能指出我正确的方向吗？

更新：解决了它。你发布这个问题10分钟后我不知道吗我想出来了。

对于有兴趣阅读的人：.animate()

Answer 1

这是一个使用CSS的简单解决方案，没有任何javascript或jquery：

http://jsfiddle.net/L6hhj/

所以，基本上我们在链接里面有一个span元素，在悬停时它将是100％宽。您只需添加一些过渡来为颜色/宽度设置动画：

HTML：

<ul>
    <li><a href=""><span></span><strong>Menu item</strong></a></li>
    <li><a href=""><span></span><strong>Menu item</strong></a></li>
    <li><a href=""><span></span><strong>Menu item</strong></a></li>
</ul>

CSS：

ul li {
    display:block;
}

ul li a {
    display:block;
    position:relative;
    height:30px;
    line-height:30px;
    color:#666;
    transition: all ease-in-out 0.5s;
}

ul li a span {
    position:absolute;
    right:0px;
    width:0px;
    background:red;
    height:30px;
    top:0px;
    transition: all ease-in-out 0.5s;
}

ul li a strong {
    position:relative;
}

ul li a:hover {
    color:#fff;
}

ul li a:hover span {
    width:100%;
}

易用元素背景颜色css或jquery

1 个答案: