最近、私はかなり恥ずかしいCSSの監視に遭遇しました。 狭いサイドバーを含むアイコンを備えたウェブサイトを開発していました。 説明的なテキストのためのスペースがないため、デザインはアクセス可能でありながら最初に隠されたツールチップが長引くことでトリガーされました。 ツールチップは、3秒のホバーの後に表示されます。

私の最初のアプローチはJavaScriptの状態管理に関係していました：

1. ツールチップの可視性を追跡するための状態変数（可視/非表示）。 この状態は、関連するHTML要素のクラスを更新します。
2. イベントリスナー（ mouseenter 、 mouseleave ）を管理する。
3. 状態をに設定する前の3秒の遅延 on mouseenter 。
。
4. ツールチップは非表示のままになります（ mouseleave ）。

これはReactプロジェクトだったため、JavaScript状態を使用すると自然に感じられました。しかし、振り返ってみると、不必要に複雑であることが証明されました。 mouseenter and mouseleave イベントはわずかに信頼できないと感じ、機能全体がCSS単独でより簡潔かつ効率的に実装された可能性があります。

transition-delay プロパティが含まれます。 。もの { 遷移：0.2秒; } .thing：hover { トランジションデレイ：3s; / *ホバーアニメーションのみを遅らせるだけでなく、オフではありません */ }

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

このアプローチは、タッチスクリーンのアクセシビリティに完全に対応していません。スクリーンリーダーはアクセス可能なテキストを処理し、デスクトップユーザーはツールチップから利益を得ていますが、タッチのみのユーザーはアイコンラベルを見逃す可能性があります。 私のプロジェクトは、カーソルの可用性を想定して、大きな画面を対象としていますが、タッチアクセシビリティは依然として懸念事項です。 要素がリンクの場合、

が最初のタップでアクティブになる可能性があります。 リンクが明確なタイトルを持つページにつながる場合、それは十分なコンテキストを提供する可能性があります。 それ以外の場合、タッチイベントのためのJavaScriptイベント処理は実行可能なオプションのままです。