[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事件處理仍然是一個可行的選擇。