时间戳

首页 > 解决方案 > 如何修复 div 在 html 中不能正确收缩

html - 如何修复 div 在 html 中不能正确收缩

问题描述

我在一个 flexbox 中有 3 个 div，当光标悬停在其中一个上时，一个展开，另外两个缩小。当我将光标悬停在一个上时，它会扩展，但其他的不会正确缩小（如果我将鼠标悬停在第一个上，它们都会这样做，但当我将鼠标悬停在第二个或第三个上时不会）

body {
  display: flex;
  flex-direction: row;
}

div {
  width: 250px;
  height: 100px;
  background-color: black;
  margin: 10px;
  transition: width 0.1s ease-in-out;
}
.e1:hover { width: 500px; }
.e1:hover ~ .e2 { width: 100px; }
.e1:hover ~ .e3 { width: 100px; }
.e2:hover { width: 500px; }
.e2:hover ~ .e1 { width: 100px; }
.e2:hover ~ .e3 { width: 100px; }
.e3:hover { width: 500px; }
.e3:hover ~ .e1 { width: 100px; }
.e3:hover ~ .e2 { width: 100px; }
<body>
  <div class="e3">
    <p> </p>
  </div>
  <div class="e2">
    <p> </p>
  </div>
  <div class="e3">
    <p> </p>
  </div>
</body>

标签： htmlcss

解决方案

最终结果：但它在 CSS 中有限制

.wrapper {
  display: flex;
  flex-direction: row;
}

.e {
  width: 250px;
  height: 100px;
  background-color: black;
  margin: 10px;
  transition: transform .2s
}

.wrapper:hover > .e {
  transform: scale(0.9)
}
.wrapper:hover .e:hover {
  transform: scale(1.1)
}
<div class="wrapper">
  <div class="e">
    <p> </p>
  </div>
  <div class="e">
    <p> </p>
  </div>
  <div class="e">
    <p> </p>
  </div>
</div>

推荐阅读