如何在悬停时顺利地制作背景宽度

Question

我遇到了一个css转换的小问题。

我想让背景宽度动画悬停，它确实工作，但它有点跳动。

我的CSS代码是

ul { 
    list-style:none; 
    margin: 0; 
    padding:0; 
} 
ul li { 
    margin-bottom: 8px; 
    color:#999; 
} 
ul li:hover { 
    color: #FFF; 
    background-color: #f6634c; 
    width: 200px; 
    -webkit-transition: all 0.3s ease-out; 
    -moz-transition: all 0.3s ease-out; 
    -o-transition: all 0.3s ease-out; 
    transition: all 0.3s ease-out; 
} 

演示可以在这里http://codepen.io/anon/pen/IFbds

的原因，它是心惊肉跳看到的是，因为我还没有规定对李的宽度，但如果我这样做，该动画背景不会从左侧开始。我希望宽度在文字开始处有动画效果。

此外，它只有当您悬停在链接的开始附近时才会动画。

Answer 1

赞this？

ul { 
    list-style:none; 
    margin: 0; 
    padding:0; 
    overflow:hidden; /*to clear the floats*/ 
} 
ul li { 
    margin-bottom: 8px; 
    color:#999; 
    min-width:0px; /*the property we are going to animate, set to specific value*/ 
    float:left; /*prevent display block from filling up all available width*/ 
    clear:left; /*prevent float left from putting blocks in-line*/ 
    display:block;/*cause width to be interpreted my way*/ 
} 
ul li:hover { 
    color: #FFF; 
    background-color: #f6634c; 
    min-width: 200px; /*BOOM*/ 
    -webkit-transition: all 0.3s ease-out; 
    -moz-transition: all 0.3s ease-out; 
    -o-transition: all 0.3s ease-out; 
    transition: all 0.3s ease-out; 
}