我們如何消除觸控設備按鈕上的黏滯懸停效應？

防止觸控裝置上按鈕的黏滯懸停效果

觸控裝置中按鈕的持久懸停狀態可能會很麻煩。為了解決這個問題，已經提出了各種解決方案，但似乎沒有一個完全令人滿意。一種方法是在觸控端添加「無懸停」類，但這會對效能產生負面影響，並且無法考慮混合設備。另一種選擇是向文件添加「觸控」類，但這在同時具有觸控和滑鼠功能的裝置上也會失敗。

理想的解決方案：CSS 媒體查詢等級4

隨著CSS 媒體查詢第4 級的出現，出現了更完善的解決方案：

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

此媒體查詢專門針對具有真實/非類比懸停支援的瀏覽器（例如​​，具有滑鼠的裝置） -類似輸入機制）。此類瀏覽器中的按鈕將顯示藍色懸停效果。

舊版瀏覽器的Polyfill

對於沒有此功能的瀏覽器，有一個JavaScript polyfill 可以模擬真正的懸停支援：

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

polyfill會偵測懸停功能並相應地切換「my-true-hover」類別：

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

CSS 和JavaScript 的這種組合確保懸停效果在兩者上都能完美工作現代和傳統觸摸裝置.

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