目标是使盒子以4个DIV开头，宽度为25％（足够容易）。一旦用户将鼠标悬停在其中一个框上，我就需要那个DIV来增加其宽度，比如说增加到33％，另外三个框相应地减小它们的宽度。我确信这对于Javascript / jQuery很简单，但是我没有经过培训，因此希望找到一种使用CSS的方法。
我知道：hover伪元素，但是据我所知，这只会影响当前悬停的DIV，而不会调整其他三个DIV的大小。
以下是我在悬停状态期间正在寻找的图像示例：https://ibb.co/3cvBy26
[UPDATE 11-07-2019] 感谢Temani Afif，他的以下回答正是我想要的：
.content {
display: flex;
}
.contact {
background-color: red;
flex-basis: 30%;
transition: 0.5s linear;
}
.div {
background-color: blue;
flex-grow:1;
}
.contact:hover {
flex-basis: 40%;
}<div class="content">
<div class="contact" id="contact">
<h3> Text</h3>
<p>More textt</p>
</div>
<div class="div">
<h3> Text</h3>
<p>More textt</p>
</div>
</div>