我用 div 容器制作了四个垂直并排的列 当特定列悬停时，我希望该列宽度增加到 70%，其余列减少到 10%，并按行顺序 float
例如，当 column_about 悬停在上面时，它将向右浮动并增加到 70%，而其余列向左浮动并减少到 10%，并保持在垂直线上。 当下一列 column_skills 悬停在上面时，它将增加到 70% 并报复性地 float 到它所在的位置，而 column_about 减少到 10% 并向右浮动，而 columns_ref _port 减少并向左浮动 等等等等
一旦列的宽度增加，我希望能够让上下文显示为图像、表格、文本，但我不希望在列未扩大时上下文看起来被压扁。
我是初学者，所以我为任何令人困惑的行话道歉 thx :)
.column_about
{
background-color: #F8F8F8;
width: 40%;
height: 700px;
float: right;
box-shadow: inset 0 0 1px #000;
}
.column_about:hover
{
width: 70%;
height: 700px;
}
.column_skills
{
background-color: #434343;
width: 20%;
height: 700px;
float: left;
box-shadow: inset 0 0 1px #000;
}
.column_skills:hover
{
width: 70%;
height: 700px;
}
.column_ref
{
background-color: #FAEBCD;
width: 20%;
height: 700px;
float: left;
box-shadow: inset 0 0 1px #000;
}
.column_ref:hover
{
width: 70%;
height: 700px;
}
.column_port
{
background-color: #F7C873;
width: 20%;
height: 700px;
float: left;
box-shadow: inset 0 0 1px #000;
}
.column_port:hover
{
width: 70%;
height: 700px;
}<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="res.css">
<meta charset="utf-8">
</head>
<body>
<div class="column_about">
<p>
about me
</p>
</div>
<div class="column_skills">
<p>
skills/experence
</p>
</div>
<div class="column_ref">
<p>
references
</p>
</div>
<div class="column_port">
<p>
portfolio
</p>
</div>
</body>
</html>最佳答案
添加了一个 .column-container ，所有内容都在里面，所以列将设置为均匀，直到您将鼠标悬停在列上。每列中还有一个 .column 类，因此不必重复列样式。
.column {
width: 25%;
height: 700px;
float: right;
box-shadow: inset 0 0 1px #000;
overflow: hidden;
}
.column_about { background-color: #F8F8F8; }
.column_skills { background-color: #434343; }
.column_ref { background-color: #FAEBCD; }
.column_port { background-color: #F7C873; }
body:hover .column:not(:hover) {
width: 10%;
}
.column:hover {
width: 70%;
}<div class="column-container">
<div class="column column_about">
<p>about me</p>
</div>
<div class="column column_skills">
<p>skills/experence</p>
</div>
<div class="column column_ref">
<p>references</p>
</div>
<div class="column column_port">
<p>portfolio</p>
</div>
</div>关于html - 如何在悬停时同时更改多个 div 容器列的宽度，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45178821/