用悬停（CSS）扩展后保持div宽度

Question

我希望在将其悬停在另一个元素上之后保持div的宽度。那是我的代码：

CSS：

div.container{
width: 400px;
height: 250px;
border: 1px solid;
clear: both;

}

.square{
width: 100px;
height: 100px;  
background: black;
float: left;
position: relative;
}

.grow {
width: 0px;
height: 100px;
float: left;
background: black; 
position: relative; 
transition:width 0.5s; 
-webkit-transition:width 0.5s;
background: green;
}

.square:hover + .grow {
width: 200px; 
}

还有我的HTML：

<div class="container">
        <div class="square"></div>
        <div class="grow"></div>
</div>

我想要一个唯一的CSS解决方案。我知道JS很简单，但我确实需要使用CSS。

非常感谢！

Answer 1

为缩小动画部分设置极高的过渡时间，这将产生不缩小的效果。不需要js，只需将它设置为3600s（可能会尝试更高？）这将是一个小时将给你一个视觉静态很长一段时间。我无法找到最长时间，但似乎有效。

＆＃13;

＆＃13;

div.container{
    width: 400px;
    height: 250px;
    border: 1px solid;
    clear: both;
}

.square{
    width: 100px;
    height: 100px;  
    background: black;
    float: left;
    position: relative;
    transition:width 5s; 
    -webkit-transition:width 5s;
}

.grow {
    width: 0px;
    height: 100px;
    float: left;
    background: black; 
    position: relative; 
    transition:width 3600s; 
    -webkit-transition:width 3600s;
    background: green;
}

.square:hover + .grow{
    width: 200px; 
    transition:width 0.5s; 
    -webkit-transition:width 0.5s;
}

＆＃13;

<div class="container">
        <div class="square"></div>
        <div class="grow"></div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

使用动画（而不是过渡）是一个选项：

.container {
    width: 400px;
    height: 250px;
    border: 1px solid;
}

.square {
    width: 100px;
    height: 100px;  
    background: black;
    float: left;
    position: relative;
}

.grow {
    width: 0;
    height: 100px;
    float: left;
    background: black; 
    position: relative; 
    transition: width 0.5s; 
    background: green;
    animation-fill-mode: both;
    animation-name: extend;
    animation-duration: 1000ms;
    animation-play-state: paused;
}

.square:hover + .grow {
    animation-play-state: running;    
}

@keyframes extend {
    0% { width: 0; }
    100% { width: 200px; }
}

<div class="container">
        <div class="square"></div>
        <div class="grow"></div>
</div>

Lea Verou的文章很好看：基本上我们在animation-play-state和paused之间切换running，并使用animation-fill-mode来确保扩展的div在动画完成后保留我们想要的样式。有一个小提琴here。

这里的缺点是，如果你将.square悬停，但在动画结束前关闭光标，那么.grow. div中途被“卡住”（这可能是也可能不是问题，并且它可能是任何仅CSS解决方案的问题。）