如何在不同瀏覽器版本中使用 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 版本，請檢查如果:focus 選擇器存在。如果沒有，請手動新增：

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

透過實作這些解決方案，您可以確保輸入焦點互動在瀏覽器中表現一致。

以上是如何在不同瀏覽器版本中使用 jQuery 可靠地偵測動態懸停效果的輸入焦點？的詳細內容。更多資訊請關注PHP中文網其他相關文章！