如何将悬停的重置延迟到转换完成后？

html5 • • 问答

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

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

让我们称之为 Situation-a

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

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

让我们称之为 Situation-b

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

但是你怎么做呢？

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

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

这是两种情况的片段

* {
  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>
  <button>action a</button>
  <button>action b</button>
  <button>action c</button>
</div>
Situation B (on button A hover, right border is not seen)
<div>
  <button>action a</button>
  <button>action b</button>
  <button>action c</button>
</div>
以上是如何将悬停的重置延迟到转换完成后？的全部内容。
THE END
分享
二维码
< <上一篇
下一篇>>
相关内容