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

Question

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

悬停的元素有 50% 的宽度，其余两个元素各有 25%，因此所有元素组合起来应该有 100% 的宽度。

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

有没有办法解决这个问题？每个元素或类似的东西都有不同的转换持续时间？

这里是小提琴：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 提供与上次浮动的相同的 bg 颜色 li

JSfiddle

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