How to fix div not shrinking properly in html

Question

I have 3 divs in a flexbox where when the cursor hovers on one of them, that one expands and the other two shrink. When I hover my cursor over one, it expands but the other ones don't shrink properly (they both do if I hover over the first one, but don't when I hover over the second or third one)

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>

where is your hover code? – Temani Afif Aug 01 '19 at 10:33 — Temani Afif, Aug 01 '19 at 10:33
sorry I didn't realize that it wasn't there until now – Avacadabavado Aug 02 '19 at 01:53 — Avacadabavado, Aug 02 '19 at 01:53

score 1 · Answer 1 · answered Aug 01 '19 at 11:13

End up in this: But it has limitation in 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>

How to fix div not shrinking properly in html

1 Answers1