Question

您好我希望看到悬停效果超过平板电脑。我写了以下代码。它可以在桌面上运行，但是，我不会通过chrome切换设备工具栏看到悬停效果超过平板电脑设备。我看到了对点击的影响。我们不能通过切换设备工具栏看到悬停效果吗？

<!DOCTYPE html>
<html>
<head>
<style>
p:hover, p.hover_effect {
    color: red;
}
.hover {
-webkit-user-select: none;
-webkit-touch-callout: none;        
}
</style>
<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>

</head>
<body>
<p class="hover">Some Text</p>

<script>
    $(document).ready(function() {
    $('.hover').bind('touchstart touchend', function(e) {
        e.preventDefault();
        $(this).toggleClass('hover_effect');
    });
});
</script>
</body>
</html>

Answer 1

我只是在本地运行您的代码，它似乎按预期工作。

如果您申请将p - 标记设为hover类，则不在Chrome设备模式下，它会按预期方式悬停。否则，在设备模式下，“触摸”（单击）项目会成功更改颜色。

只有在单击鼠标后才会启动“触摸”。

请参阅以下gif，了解我的意思。

通过chrome切换设备工具栏模拟平板电脑上的悬停效果

1 个答案: