異なるブラウザーのバージョン間で jQuery を使用して動的ホバー効果の入力フォーカスを確実に検出するにはどうすればよいですか?

jQuery を利用して動的ホバー効果の入力フォーカスを検出する

ユーザー インターフェイスを設計するときは、ブラウザ間の互換性を考慮することが重要です。 CSS :hover を使用したホバー効果はほとんどの最新ブラウザでシームレスに機能しますが、IE6 ではアンカー タグ () でのみ :hover をサポートするため、課題が生じます。これに対処するために、jQuery は解決策として hover() メソッドを提供します。ただし、このメソッドを

に適用すると、jQuery の focus() イベントと競合します。

このハードルを克服するには、ユーザーがフォーカスのある入力の上にマウスを置いたときに境界線が消えないように条件付きロジックを実装できます。残念ながら、jQuery には :focus セレクターがないため、代替ソリューションの検索が必要になります。

jQuery 1.6 以降

jQuery 1.6 では、:focus セレクターが導入されました。タスクを簡素化します。コードを使用するだけです:

$("..").is(":focus")

jQuery 1.5 以前

jQuery の以前のバージョンの場合、カスタム セレクターを定義できます:

jQuery.expr[':'].focus = function( elem ) {
  return elem === document.activeElement && ( elem.type || elem.href );
};

これにより、フォーカスを確認できます使用方法:

if ($("...").is(":focus")) {
  ...
}

すべての jQuery バージョン

現在フォーカスがある要素を確認するには:

$(document.activeElement)

バージョン間の互換性

jQuery のバージョンが不明な場合は、 :フォーカスセレクターが存在します。そうでない場合は、手動で追加します:

(function ( $ ) {
    var filters = $.expr[":"];
    if ( !filters.focus ) { 
        filters.focus = function( elem ) {
           return elem === document.activeElement && ( elem.type || elem.href );
        };
    }
})( jQuery );

これらのソリューションを実装することで、入力フォーカスのインタラクションがブラウザー間で一貫して動作することを保証できます。

以上が異なるブラウザーのバージョン間で jQuery を使用して動的ホバー効果の入力フォーカスを確実に検出するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。