长悬停

前几天我经历了一个 **非常尴尬的** CSS 时刻。

我正在处理一个设计的前端代码，该设计有一个狭窄的图标侧边栏。那里没有足够的空间来显示图标的文本，所以我们的想法是使用可访问的（但默认情况下视觉隐藏的）文本，这些文本已经存在于“长悬停”上的 **工具提示** 中。也就是说，带光标的设备，以及光标悬停在元素上一段时间，比如三秒钟。

所以，我的想法是这样的…

1. 我可以使用 **状态**：工具提示要么 **可见**，要么 **不可见**。我将管理状态，这将在 DOM 中表现为 HTML 元素上的类名。
2. 然后我将处理更改该状态的 **逻辑**。
3. **默认** 状态将为 **不可见**，但如果鼠标在元素内停留超过三秒钟，我将切换状态为 **可见**。
4. 如果鼠标曾经离开元素，状态将保持（或变为） **不可见**。

这是一个 React 项目，所以状态只是 *浮现在脑海中*。结果是这样的

还不错，对吧？嗯。在 JavaScript 中管理状态可能会打开一些大门，但在这种情况下，这完全是过犹不及。除了我认为 mouseenter 和 mouseleave 有点挑剔之外，CSS 就可以完成整个事情，而且代码更少。

这就是尴尬的部分… 当我正在编写的 CSS 已经可以处理时，为什么我要向上到达 JavaScript 库来做这件事呢？

我将保留 React 中的 UI，但 **移除所有状态管理内容**。我将做的只是在 .icon 为 :hover 时添加 transition-delay: 3s，以便在 *不* 悬停时为零秒，然后在鼠标光标离开时立即消失）。

长悬停在 CSS 中基本上是一行代码

.thing {
  transition: 0.2s;
}
.thing:hover {
  transition-delay: 3s; /* delay hover animation only ON, not OFF */
}

效果很好。

这里没有解决的一个问题是触摸屏问题。你可以说屏幕阅读器对可访问文本没问题，桌面浏览器也因为自定义工具提示而没问题，但使用纯触摸屏的用户可能无法发现图标标签。在我的情况下，我是在构建一个大型屏幕场景，假设有光标，但我认为触摸屏并非完全没有希望。如果元素是一个链接，:hover 可能会在首次点击时触发。如果链接带你到一个带有清晰标题的地方，这可能就足够了。你也可以随时回到更多的 JavaScript 并处理触摸事件。