如何在悬停时调整列的大小？答案

【问题标题】：How to resize column on hover?如何在悬停时调整列的大小？
【发布时间】：2016-05-12 13:18:22
【问题描述】：

我想做的是，

列框是100% width，当你悬停它时，我想向左过渡，框列的宽度约为60%，第二个块20，只在你悬停一个块时显示。

我的 css 和 html 在这个 link 中。

让我们这样说：

例如，如果我有

<div main>
 <div left60%>
  <div right40%>
</div main>

当我悬停在主 div 上时，左侧 div 保持宽度为 60%，右侧为 40%。

【问题讨论】：

对您的问题提供更多解释
@Zubairsadiq 第一个问题是我的悬停过渡不起作用（向左平滑滑动）2）右列（块 20）需要有高度 ov 子类（块）3）第三个问题，我希望在我悬停块之前隐藏此右列
jsfiddle.net/3ph9z54k 试试这个可能有帮助
jsfiddle.net/3SYka/192
左边的必须保持在 60%，而我悬停在右边的块

【解决方案1】：

我不是 100% 确定您要做什么，但我认为这可能很接近： JSFIDDLE

我把你的盒子改成：

.box{
    transition:2s;
  width:100%;
}

并添加它以显示块20

.box:hover + .block20{
 display:block;
 }

我还把你的 block20 告诉了display:none，因为你想在事情发生之前把它隐藏起来

【讨论】：