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

Posted 2023-05-08

【中文标题】三个具有相对宽度的浮动元素上的 css 过渡

【英文标题】：css transition on three floated elements with relative width

【发布时间】：2014-06-11 09:26:21

【问题描述】：

我在悬停三个具有相对宽度和 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;

谢谢！

【问题讨论】：

如何同时将鼠标悬停在所有这些对象上？你有三只老鼠吗？

@Paulie_D 您将光标快速移动到所有三个上，而不是从一个缓慢移动到另一个。如果时间安排得当，延迟会导致所有三列同时转换，但并不总是等于 100% 宽度。

听起来像是一个小问题，可以通过容器上的背景颜色来解决：jsfiddle.net/T6gPM/1

@joseph：正是，谢谢

可能的解决方案包括图片：jsfiddle.net/T6gPM/2

【参考方案1】：

虽然我认为这是一个不太可能的极端情况/场景（用户通常不会像那样移动光标），但只要给 contianier 提供与上次浮动的相同的 bg 颜色 li

JSfiddle

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

【讨论】：

非常好的解决方法，我不认为我们有一个简单的直接解决方案（也许它甚至不存在纯 CSS 或者它可能变得非常复杂）

这不是一个好的解决方法。 :P 提出问题的开发人员特别指出，这些图像中会出现图像，而不是纯色。这不起作用。

OQ 中没有关于图像的任何内容（这是一个事后评论），但我认为如果将图像定位正确，它仍然可以工作：jsfiddle.net/T6gPM/2

@Paulie_D：感谢您的努力，我一定会尝试使用您的示例，因为实际情况要复杂一些。

那么这个问题有没有可能没有纯 CSS 解决方案（保持 100% 的元素组合宽度）并且 javascript 解决方法可能是唯一的选择？