Question

我有一个使用bootstrap开发的菜单。当您将鼠标悬停在每个项目上时，它会有一个CSS过渡效果。我似乎无法弄清楚我怎么能做同样的事情，但在标题和来自另一个方向的过渡效果之上。

到目前为止我的代码是

.navbar ul li:after {
content:'';
display: block;
height: 4px;
width: 0;
transition: width .6s ease, background-color .6s ease;
}
.navbar ul li:hover:after {
width: 100%;
background: #fff;
}

我创建了一个JSFiddle Here

提前感谢您的帮助。

Answer 1

.navbar ul li:before,
.navbar ul li:after {
    content:'';
    display: block;
    position:absolute;
    height: 4px;
    width: 0;
    background: #fff;
    transition: width .6s ease, background-color .6s ease;
}
.navbar ul li:before{ top:0;    right:0; }
.navbar ul li:after { bottom:0; left:0;  }

.navbar ul li:hover:before,
.navbar ul li:hover:after{ width: 100%; }

http://jsfiddle.net/RokoCB/zpxtre6n/4/

Answer 2

演示 - http://jsfiddle.net/zpxtre6n/5/

只需为float:right添加.navbar ul li:after，为float:left添加.navbar ul li:before

.navbar ul li:after, .navbar ul li:before {
    content:'';
    display: block;
    height: 4px;
    width: 0;
    float:right;
    transition: width .6s ease, background-color .6s ease;
}
.navbar ul li:before{
    float:left;
}
.navbar ul li:hover:after, .navbar ul li:hover:before  {
    width: 100%;
    background: #fff;
}

如何在菜单上获得类似的效果

2 个答案: