How can I delay the reset of hover until after transitions finish?

Question

So imagine you have 3 buttons next to each other.

In CSS you give it a style of a border of 3px and on hover that the border changes color. In render you see that the top and bottom, left, of first child, and right, of last child, borders are all 3px as set. But in between its 6px, as both buttons have there own border next to each other.

Lets call this a Situation-a

So to fix it you make it so every button, that is not first, would move the same -3px to the left so make it share the same border visualy.

But then on hover the first button right side of the border does not change the color as the button next to him is covering it.

Lets call this a Situation-b

But both solutons are wrong. What should happen is that the border between them is still 3px and on hover, no matter witch button, all borders around that 1 button would change color.

BUT HOW you do it?

Adding z-index to the button with :hover does NOT solve it since once you unhover, the border that is being overlapped instantly changes back the color while the rest of the borders slowly changes back the color.

Basically, buttons next to each other need to share the same border and on hover change the color of same border but to not create a 6px gap.

Here is a snippet of both Situations

* {
  padding: 0;
  margin: 0;
}
.parent {
  font-size: 0;
  margin: 10px;
}
.child {
  font-size: 24px;
  padding: 5px 15px;
  border-radius: unset;
  border: 3px solid black;
  background-color: lightgray;
  transition: border 0.25s ease-in-out;
}
.child:hover {
  border: 3px solid cyan;
}
.situation-b .child:not(:first-child) {
  margin-left: -3px;
}

Situation A (border between is 6px)
<div class="parent situation-a">
  <button class="child">action a</button>
  <button class="child">action b</button>
  <button class="child">action c</button>
</div>
Situation B (on button A hover, right border is not seen)
<div class="parent situation-b">
  <button class="child">action a</button>
  <button class="child">action b</button>
  <button class="child">action c</button>
</div>

Here is a created exmaple online of the issue: https://codesandbox.io/s/optimistic-dubinsky-1ji85?file=/index.html

Answer 1

You can actually do it with the z-index. You just set a base z-index and put the transition on both the border and the z-index. See the example below where I exaggerated the transition time so that you can see that it works:

* {
  padding: 0;
  margin: 0;
}
.parent {
  font-size: 0;
  margin: 10px;
}
.child {
  font-size: 24px;
  padding: 5px 15px;
  border-radius: unset;
  border: 3px solid black;
  background-color: lightgray;
  transition: all 1s ease-in-out;
  position: relative;
  z-index:1;
}
.child:hover {
  border: 3px solid cyan;
  z-index:2;
}
.situation-b .child:not(:first-child) {
  margin-left: -3px;
}

Situation A (border between is 6px)
<div class="parent situation-a">
  <button class="child">action a</button>
  <button class="child">action b</button>
  <button class="child">action c</button>
</div>
Situation B (on button A hover, right border is not seen)
<div class="parent situation-b">
  <button class="child">action a</button>
  <button class="child">action b</button>
  <button class="child">action c</button>
</div>