如何模拟触摸设备上的悬停效果？

在触摸设备上模拟悬停效果

随着支持触摸的设备的广泛使用，复制经典的鼠标交互（例如悬停效果）可以是一个挑战。当尝试单独使用 CSS 创建悬停效果时会出现此问题，因为它仅适用于鼠标输入。幸运的是，有一个涉及合并 JavaScript 和修改 CSS 的解决方案。

实现模拟

要模拟长触摸时的悬停效果，请按照以下步骤操作：

1. 将一个名为“hover”的类添加到您想要悬停效果的 HTML 元素中
2. 添加以下 JavaScript 代码以启用触摸处理：

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

3. 在 CSS 中，修改悬停效果定义以包含“.hover_effect”类:

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

4. （可选）添加以下 CSS 以禁用浏览器选择touch:

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

说明

此解决方案利用了在支持触摸的设备上触发的“touchstart”和“touchend”事件。当用户的手指触摸屏幕时，会触发“touchstart”事件，并将“hover_effect”类添加到具有“hover”类的 HTML 元素中。当触摸结束时，会触发 'touchend' 事件，删除 'hover_effect' 类，有效模拟悬停效果。

以上是如何模拟触摸设备上的悬停效果？的详细内容。更多信息请关注PHP中文网其他相关文章！