html - 悬停时 div 宽度增加(不取代内联 div)

Question

这是我的页面 mintrain.co.uk/indexsp 的链接

因此，对于首页，我将四个类别的宽度设置为 25%。 最重要的是，我将悬停时的宽度加倍到 50%。 悬停时，最右边的 div 被推到其他的下面。 我如何使用 css 来防止这种情况发生？ 我有使非悬停 div 宽度减小(到 16%)的想法，但我不知道如何实现这一点。 任何帮助都会很棒。

Answer 1

我推荐使用flexbox。只需将 display: flex 添加到 container 并将 flex: 1 添加到 childs 即可制作您想要的布局。然后将更大的 flex 值添加到 :hover。像这样:

.container {
  display: flex;
}

.link {
  flex: 1;
  
  /* For demo only */
  border: 1px solid #000;
  height: 40px;
  transition: 1s all;
}

.link:hover {
  flex: 1.5; /* Or any other value */
}

<div class="container">
  <div class="link"></div>
  <div class="link"></div>
  <div class="link"></div>
  <div class="link"></div>
</div>

对于您的站点，只需将 .container 替换为 .boxes 并将 .link 替换为 #box(这在您的网站上不是有效的 HTML，具有多个相同的 ID)