我們如何防止觸摸環境中按鈕的黏滯懸停效果？

克服觸控環境中按鈕的黏性懸停效果

在設計使用觸控裝置的使用者介面時，管理按鈕上的懸停效果可以是一個挑戰。這個看似簡單的任務變得複雜，因為觸控螢幕上會出現持續的懸停狀態，觸控後懸停效果保持啟動狀態，導致按鈕永遠呈現藍色。

低效的解決方案

雖然有解決方案，例如添加無懸停類ontouchend 或使用帶有documentElement 的觸摸類，但這些方法都有缺點。它們會降低效能，並且無法處理同時具有觸控螢幕和滑鼠功能的裝置。

難以捉摸的解決方案

理想的解決方案是在觸摸結束時刪除懸停狀態，但是直接操縱懸停狀態似乎難以捉摸。將注意力集中在其他地方無法消除懸停效果，並且點擊另一個元素的手動操作似乎會停用它，但以編程方式觸發此操作仍然是個謎。

突破

2018 年CSS 媒體查詢第4 級的到來為此困境帶來了革命性的解決方案：

@media (hover: hover) {
    button:hover {
        background-color: blue;
    }
}

該聲明本質上是這樣表述的：「如果瀏覽器支援真正的懸停（例如，類似滑鼠的輸入設備） ），當按鈕懸停在上方時應用懸停樣式。」

對於缺乏此功能的瀏覽器，polyfill 可以來救援。利用這個polyfill，上面的未來CSS可以轉換成：

html.my-true-hover button:hover {
    background-color: blue;
}

來自polyfill的客戶端JavaScript然後檢測懸停支援並相應地切換my-true-hover類的存在，提供一個優雅的解決觸摸設備上黏滯懸停效果的問題。

以上是我們如何防止觸摸環境中按鈕的黏滯懸停效果？的詳細內容。更多資訊請關注PHP中文網其他相關文章！