長いホバー

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

私の最初のアプローチには、JavaScriptの状態管理が含まれていました。

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

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

恥ずかしい認識：CSSソリューションが容易に利用できるようになったとき、私は不必要にJavaScriptライブラリを活用しました。

React UIを保持しましたが、JavaScriptの状態管理を削除しました。ソリューションには、単純なCSS transition-delayプロパティが含まれていました。

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

このエレガントなワンライナーは、望ましい長所効果を完全に実現します。

ただし、このアプローチは、タッチスクリーンのアクセシビリティに完全に対応していません。スクリーンリーダーはアクセス可能なテキストを処理し、デスクトップユーザーはツールチップから利益を得ていますが、タッチのみのユーザーはアイコンラベルを見逃す可能性があります。私のプロジェクトは、カーソルの可用性を想定して、大きな画面を対象としていますが、タッチアクセシビリティは依然として懸念事項です。要素がリンクの場合、 :hover初期タップでアクティブになる場合があります。リンクが明確なタイトルを持つページにつながる場合、それは十分なコンテキストを提供する可能性があります。それ以外の場合、タッチイベントのためのJavaScriptイベント処理は実行可能なオプションのままです。

以上が長いホバーの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。