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提供与上一次浮动li相同的bg颜色

JSfiddle

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

具有相对宽度的三个浮动元素上的css转换

1 个答案: