如何将悬停的重置延迟到过渡完成后？

Question

所以想象一下，你有 3 个彼此相邻的按钮。

在 CSS 中，你给它一个 3px 的边框样式，并且在悬停时边框会改变颜色。在渲染中，您会看到第一个孩子的顶部和底部、左侧和最后一个孩子的右侧，边框都是设置的 3px。但是在它的 6px 之间，因为两个按钮都有自己的边框。

让我们称之为Situation-a

所以要修复它，你可以让每个按钮（不是第一个按钮）都向左移动相同的 -3px，从而使其在视觉上共享相同的边框。

但是在悬停时，边框右侧的第一个按钮不会改变颜色，因为他旁边的按钮正在覆盖它。

让我们称之为Situation-b

但这两种解决方案都是错误的。应该发生的是，它们之间的边框仍然是 3px，并且在悬停时，无论女巫按钮如何，该 1 按钮周围的所有边框都会改变颜色。

但是你是怎么做到的？

将z-index 添加到带有:hover 的按钮并不能解决问题，因为一旦您取消悬停，被重叠的边框会立即变回颜色，而其余边框会慢慢变回颜色。

基本上，彼此相邻的按钮需要共享相同的边框，并且在悬停时会更改相同边框的颜色，但不会产生 6px 的间隙。

这是两种情况的sn-p

* {
  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>

这是该问题的在线创建示例：https://codesandbox.io/s/optimistic-dubinsky-1ji85?file=/index.html

Answer 1

您实际上可以使用 z-index 来做到这一点。您只需设置一个基本 z-index 并将过渡放在边框和 z-index 上。请参阅下面的示例，其中我夸大了转换时间，以便您可以看到它有效：

* {
  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>

Answer 2

如果您支持 CSS 网格，您可以执行以下操作：

.buttons {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 3px;
  width: 300px;
  padding: 3px;
  background-color: black;
}

button {
  border: 0;
  outline: 3px solid transparent;
  transition: all 1s ease 0s;
}

button:hover {
  outline-color: cyan;
}

<div class="buttons">
  <button>action a</button>
  <button>action b</button>
  <button>action c</button>
</div>

说明

包装元素.buttons 提供黑色作为背景。与 padding 和 column-gap 配合使用，看起来按钮有一个 3px 的边框。使用对文档布局没有影响的outline，以便在过渡期间允许重叠。

---

你也可以用 flexbox 做到这一点：

.buttons {
  display: flex;
  width: 300px;
  padding: 3px;
  background-color: black;
}

button {
  flex: 1;
  border: 0;
  outline: 3px solid transparent;
  transition: all 1s ease 0s;
}

button:not(:first-child) {
  margin-left: 3px;
}

button:hover {
  outline-color: cyan;
}

<div class="buttons">
  <button>action a</button>
  <button>action b</button>
  <button>action c</button>
</div>

Answer 3

回答如何在悬停时延迟“out”过渡：

您也可以在转换属性中使用z-index。它不支持缓和其他属性的方式，但它确实支持转换延迟。

* {
  padding: 0;
  margin: 0;
}
.parent {
  font-size: 0;
  margin: 10px;
}
button {
    position: relative;
  font-size: 24px;
  padding: 5px 15px;
  border-radius: unset;
  border: 3px solid black;
  background-color: lightgray;
    margin-right: -3px;
    z-index:1;
    transition: z-index 0s 1s, border 1s ease-in-out;
}

button:hover {
  border: 3px solid cyan;
    z-index: 10;
    transition: z-index 0s, border 1s ease-in-out;
}

<div class="parent">
  <button>action a</button>
  <button>action b</button>
  <button>action c</button>
</div>

解决布局问题的替代方法（下一个兄弟）

由于延迟并不能解决实际的布局问题并且 z-index 存在问题，因此还有其他方法。也许这会帮助那些无法通过堆叠元素解决问题的人。

在 CSS 中，我们可以使用 Next 兄弟选择器 (+) 来选择类型/类的 NEXT DOM 元素进行交互。

* {
  padding: 0;
  margin: 0;
}
.parent {
  font-size: 0;
  margin: 10px;
}
button {
    position: relative;
  font-size: 24px;
  padding: 5px 15px;
  border-radius: unset;
  border: 3px solid black;
  background-color: lightgray;
    margin-right: -3px;
    z-index:1;
    transition: border 0.25s ease-in-out;
}

button:hover {
  border-color: cyan;
}

/* next element in the dom */
button:hover + button {
    border-left-color: cyan;
}

<div class="parent">
  <button>action a</button>
  <button>action b</button>
  <button>action c</button>
</div>

注意：由于边框呈现的方式，这会导致较大边框宽度上出现奇怪的裁剪外观，因此我可能会使用 box-shadow 而不是边框​​来解决这个问题元素。

Answer 4

您实际上可以使用您的 z-index 想法来做到这一点。您必须只设置 position:absolute、position:relative 或 position:fixed 到元素才能工作：

button {
      border: 4px solid black;
      height: 50px;
      width: 100px;
      border-radius: 0;
      margin-left: -8px;
      
      position: relative; /* Important */
}

button:hover {
      border: 4px solid blue;
      z-index: 2;
}

<div style="border-collapse: collapse;">
    <button>aa</button>
    <button>bb</button>
</div>

Answer 5

我认为你缺少的只是position: relative;，所以z-index 被占用了。

* {
  padding: 0;
  margin: 0;
  font-size: 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;
  position: relative;
  z-index: 1;
}

.child:hover {
  z-index: 2;
  border-color: red;
}

.situation-b .child:not(:first-child) {
  margin-left: -3px;
}

    <div class="parent situation-a">
      <button class="child">action a</button>
      <button class="child">action b</button>
      <button class="child">action c</button>
    </div>
    <div class="parent situation-b">
      <button class="child">action a</button>
      <button class="child">action b</button>
      <button class="child">action c</button>
    </div>