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

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

支持触摸的设备缺乏鼠标的传统悬停功能。当尝试单独使用 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中文网其他相关文章！