如何使用触摸启用的浏览器模拟悬停？ [英] How do I simulate a hover with a touch in touch enabled browsers?

问题描述

有了这样的HTML：

<p>Some Text</p>

然后这样的CSS：

p {
  color:black;
}

p:hover {
  color:red;
}

如何允许在启用触摸的设备上长时间触摸以复制悬停？

How can I allow a long touch on a touch enabled device to replicate hover? I can change markup/use JS etc, but can't think of an easy way to do this.

推荐答案

确定，我可以改变标记/使用JS等，但不能想象一个简单的方法来做到这一点。 你干了！

OK, I've worked it out! It involves changing the CSS slightly and adding some JS.

使用jQuery简化操作：

Using jQuery to make it easy:

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

在英语中：当您开始或结束触摸时，请将 hover_effect 开启或关闭。

In english: when you start or end a touch, turn the class hover_effect on or off.

然后，在HTML中，将一个类悬停在任何您想使用的项目上。在你的CSS中，替换任何实例：

Then, in your HTML, add a class hover to anything you want this to work with. In your CSS, replace any instance of:

element:hover {
    rule:properties;
}

与

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

只是为了增加有用​​性， p>

And just for added usefulness, add this to your CSS as well:

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

要停止浏览器要求您复制/保存/选择图像。

To stop the browser asking you to copy/save/select the image or whatever.

轻松！

这篇关于如何使用触摸启用的浏览器模拟悬停？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！