如何消除觸控設備上不需要的 :hover CSS？

在支援觸控的裝置上消除:hover CSS

當使用者透過觸控裝置造訪網站時，:hover CSS 宣告可能會變更得不可取，因為它們不能有效地響應觸摸輸入。使用者可能會遇到持久的懸停效果，這可能會造成破壞。為了解決這個問題，有幾種方法可以刪除或忽略觸控裝置上的 :hover 樣式。

JavaScript 刪除

一種方法是使用 JavaScript 消除所有 CSS 規則包含：懸停。此方法相容於舊版瀏覽器，不需要修改 CSS。透過檢查裝置是否支援觸控輸入並迭代樣式規則，JavaScript 可以刪除所有 :hover 聲明。

僅 CSS 媒體查詢

另一個選項使用 @僅當設備支援懸停時，媒體查詢才能限制 :hover 規則的應用。但是，此方法僅限於 iOS 9.0 和 Chrome for Android 或 Android 5.0 for WebViews。此外，它可能會破壞混合滑鼠和觸控裝置上的懸停效果。

JS 偵測與CSS 前置

強大的解決方案包括使用JavaScript 偵測觸控輸入並前置所有：具有自訂主體類別的懸停規則（例如.hasHover）。透過有條件地應用此類，僅在支援滑鼠的裝置上啟用懸停效果。

老鼠運動和觸控偵測的組合方法

最全面的方法結合了老鼠運動偵測和觸控偵測。當偵測到滑鼠移動時啟用懸停效果，並在識別到觸控輸入時停用懸停效果。這種方法在支援觸控和滑鼠的裝置上提供了無縫體驗。

實際實作

實際實作涉及 JavaScript 事件偵聽器和主體類別操作。 hasHover 類別根據觸控輸入和滑鼠移動事件動態新增或刪除。

對於現代瀏覽器，可以在 https://jsfiddle.net/57tmy8j3/ 找到一個實例。與舊瀏覽器相容的舊版本可在 https://jsfiddle.net/dkz17jc5/19/ 上找到。

以上是如何消除觸控設備上不需要的 :hover CSS？的詳細內容。更多資訊請關注PHP中文網其他相關文章！