Question

我在一个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>

Answer 1

最后这样：但是在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>

如何修复div无法在HTML中正确缩小

1 个答案: