如何在支援觸控的裝置上模擬懸停效果？

在支援觸控的裝置上模擬懸浮效果

支援觸控的裝置缺乏滑鼠的傳統懸浮功能。當嘗試單獨使用 CSS 複製懸停效果時，這提出了挑戰。

為了解決這個問題，一個聰明的解決方案是修改 CSS 並合併一些 JavaScript。使用jQuery，以下程式碼片段在觸控開始和結束事件上切換類，有效地模擬懸停狀態：

$(document).ready(function() {
    $('.hover').on('touchstart touchend', function(e) {
        e.preventDefault();
        $(this).toggleClass('hover_effect');
    });
});

在HTML 中，只需將「hover」類別新增至您想要懸停的元素即可。

要模仿CSS 懸停規則的效果，請修改CSS 以使用以下語法：

element:hover, element.hover_effect {
    rule:properties;
}

此外，加入以下CSS 以防止瀏覽器幹擾懸停效果：

.hover {
-webkit-user-select: none;
-webkit-touch-callout: none;        
}

透過這些修改，支援觸控的裝置現在將模擬懸停效果，提供更直覺的使用者體驗。

以上是如何在支援觸控的裝置上模擬懸停效果？的詳細內容。更多資訊請關注PHP中文網其他相關文章！