如何消除觸控裝置按鈕上的黏滯懸停效果？

如何消除支援觸控的裝置按鈕上的黏滯懸停效果

使用永久導航按鈕建立輪播時，會出現一個常見問題觸摸設備。按鈕的懸停狀態（通常顯示為藍色）變得“粘性”，即使點擊後仍保持激活狀態。已經探索了解決此問題的幾種方法：

• 在touchend 上添加no-hover 類別可以解決該問題，但它可能會影響性能，並在同時具有觸控和滑鼠功能的Chromebook等裝置上引入相容性問題
• 對documentElement 實作觸控類別並相應修改CSS 也可以解決該問題，但對於同時支援觸控和滑鼠的裝置來說這並不是最佳選擇。

理想的解決方案將在 touchend 時刪除懸停狀態。然而，沒有直接的方法可用於此。聚焦在另一個元素並不會消除懸停狀態。雖然手動點擊另一個元素確實如此，但在 JavaScript 中以程式方式觸發此操作仍然是一個挑戰。

要有效解決此問題，您可以利用CSS 媒體查詢等級4 的最新開發：

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

此CSS 實質上指出，「如果設備支援真正的懸停（例如，具有類似滑鼠的主要輸入裝置），請套用按鈕懸停樣式。地應用懸停樣式：

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

此解決方案有效消除了觸控設備的黏性懸停效果，同時保持所需的美觀性在具有滑鼠輸入的設備上。

$(document).on('mq4hsChange', function (e) {
    $(document.documentElement).toggleClass('my-true-hover', e.trueHover);
});

以上是如何消除觸控裝置按鈕上的黏滯懸停效果？的詳細內容。更多資訊請關注PHP中文網其他相關文章！