[2

最近，我遇到了一个相当尴尬的CSS监督。 我正在开发一个网站，其中包含一个狭窄的侧边栏，其中包含图标。 缺乏描述性文本的空间，设计的设计需要可访问但最初隐藏的工具提示，该工具提示是由长时间悬停触发的。 工具提示将在三秒钟悬停后出现。 我最初的方法涉及JavaScript状态管理：

，
1. mouseleave
在将状态设置为
2. 。工具提示将保持隐藏状态（ mouseleave ）。
这是一个反应项目，因此使用JavaScript状态感到自然。但是，回想起来，它被证明是不必要的复杂。
3. 鼠标事件感觉有点不可靠，并且单独使用CSS更加简洁，有效地实现了整个功能。 令人尴尬的实现：当CSS解决方案容易获得时，我不必要地利用JavaScript库。 我保留了React UI，但删除了JavaScript状态管理。 解决方案涉及一个简单的CSS transition-delay
属性：
4. 。事物 { 过渡：0.2s; } .thing：悬停{ 过渡 - 延迟：3s; / *仅延迟悬停动画，而不是关闭 */ }
这个优雅的单线完美地实现了所需的长期悬停效果。

：Hover 可能会在初始点击上激活。 如果链接导致带有明确标题的页面，则可能会提供足够的上下文。 否则，用于触摸事件的JavaScript事件处理仍然是一个可行的选择。