Html 如何在悬停状态下同时更改多个div countainer列的宽度

我用div容器制作了四个垂直并排的柱 当一个特定的列悬停在上面时，我希望该列的宽度增加到70%，其余的列减少到10%，并按行顺序浮动

例如，将列_about悬停在上方时，它将向右浮动并增加到70%，而其余列向左浮动并减少到10%，保持在垂直线上。 当下一列技能悬停在其上方时，它将增加到70%，并浮动到其所在位置，而列大约减少到10%，并浮动到右侧，列参考端口减少并浮动到左侧 等等等等

一旦列的宽度增加，我希望能够使上下文像图像、表格、文本一样显示，但我不希望当列未放大时上下文看起来被压扁

我是一个初学者，所以我为任何令人困惑的行话道歉（thx:）

.column\u关于
{
背景色：#F8；
宽度：40%；
高度：700px；
浮动：对；
框阴影：插入0 1px#000；
}
.column_关于：悬停
{
宽度：70%；
高度：700px；
}
1.专栏技巧
{
背景色：#434343；
宽度：20%；
高度：700px；
浮动：左；
框阴影：插入0 1px#000；
}
.column_技能：悬停
{
宽度：70%；
高度：700px；
}
.第(1)栏
{
背景色：#FAEBCD；
宽度：20%；
高度：700px；
浮动：左；
框阴影：插入0 1px#000；
}
.列参考：悬停
{
宽度：70%；
高度：700px；
}
.column_端口
{
背景色：#F7C873；
宽度：20%；
高度：700px；
浮动：左；
框阴影：插入0 1px#000；
}
.column\u端口：悬停
{
宽度：70%；
高度：700px；
}

关于我


技能/经验


参考资料


文件夹

添加了一个

.column容器

，所有内容都在其中，因此列将被设置为偶数，直到您将鼠标悬停在列上。每个列中还有一个

.column

类，因此不必重复列样式

.column{
宽度：25%；
高度：700px；
浮动：对；
框阴影：插入0 1px#000；
溢出：隐藏；
}
.column_关于{背景色：#f8f8；}
.column_skills{背景色：#434343；}
.column_ref{背景色：#FAEBCD；}
.column_port{背景色：#F7C873；}
主体：悬停。列：非（：悬停）{
宽度：10%；
}
.列：悬停{
宽度：70%；
}

关于我

技能/经验

参考资料

投资组合