具有相对宽度的三个浮动元素上的css过渡

Question

我在悬停三个具有相对宽度和css3转换集的浮动元素时遇到了问题。

悬停元素的宽度为50%，其余两个元素的宽度分别为25%，因此所有组合的元素都应该具有100%的宽度。

当我在两个元素之间悬停时，一切似乎都很好，但当我将鼠标悬停在所有元素上时，有一段时间，元素组合并不具有100%的宽度。

有没有办法解决这个问题？在每个元素上使用不同的事务持续时间或类似的东西？

这里是fiddle：http://jsfiddle.net/tolchai/T6gPM/

HTML

<ul>
    <li class='row-1'></li>
    <li class='row-2'></li>
    <li class='row-3'></li>
</ul>

CSS

ul {
    background: black;
    height: 500px;
    padding: 0;
    margin: 0;
    list-style: none;
}

ul:after {
    content:"";
    display:table;
    clear:both;  
}

ul > li {
    width: 33.33%;
    height: 100%;
    float: left;   
    transition: width .5s linear;
}

ul:hover > li {
    width: 25%;
}

ul:hover > li:hover {
    width: 50%;
}

.row-1 {
    background: red;
}

.row-2 {
    background: yellow;
}

.row-3 {
    background: green;
}

谢谢!

Answer 1

尽管我认为这是一种不太可能的边缘情况/场景(用户通常不会像那样移动光标)，但只要为contianier赋予与上一个浮动li相同的bg颜色即可

ul {
    background: green; /* same as last child */
    height: 500px;
    padding: 0;
    margin: 0;
    list-style: none;
}