三个具有相对宽度的 float 元素的CSS过渡

Question

我在悬停三个具有相对宽度和 css3 过渡集的 float 元素时遇到问题。

悬停元素的宽度为 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 提供与最后一个 float 相同的 bg 颜色 li

JSfiddle

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