时间戳

首页 > 解决方案 > 带有弹性显示项目的 div 悬停在其他项目之上

html - 带有弹性显示项目的 div 悬停在其他项目之上

问题描述

我正在尝试将带有 flex 显示的 div 添加flex-wrap: wrap为容器<div>，它包含<div>悬停时大小增加的项目。我的问题是悬停，项目换行。我想让项目保持在同一位置并漂浮在其他项目之上。 

.item {
  width: 50%;
  background-color: lightblue;
  overflow: hidden;
  font-size: xx-large;
}

.item:hover {
  width: 70%;
  background-color: lightgreen;
}
<div style="display:flex; flex-wrap:wrap;">
  <div class="item">
    item 1
  </div>
  <div class="item">
    item 2
  </div>
  <div class="item">
    item 3
  </div>
  <div class="item">
    item 4
  </div>
</div>

标签： htmlcss

解决方案

如果您启用了 flex wrap，任何超过容器宽度（默认 100%）的东西都将被放在一个新行上，您当前有 50% 并且尝试添加 70% 它不会保持在同一行

为了达到您想要的结果，您可以将这些行放在他们自己的容器中，如下所示

<div class="item-container">
      <div class="item">
        item 1
      </div>
      <div class="item">
        item 2
      </div>
    </div>
    <div class="item-container">
      <div class="item">
        item 3
      </div>
      <div class="item">
        item 4
      </div>
    </div>

.item-container {
  display: flex;
}

.item {
  flex: 50%;
  background-color: lightblue;
  overflow: hidden;
  font-size: xx-large;
}

.item:hover {
  flex: 70%;
  background-color: lightgreen;
}

推荐阅读