如何在启用触摸的浏览器中模拟悬停?

2022-01-22 00:00:00 hover javascript html css touch

使用一些像这样的 HTML:

With some HTML like this:

<p>Some Text</p>

然后是这样的一些 CSS:

Then some CSS like this:

p {
  color:black;
}

p:hover {
  color:red;
}

如何允许在支持触控的设备上长按来复制悬停?我可以更改标记/使用 JS 等，但想不出一个简单的方法来做到这一点.

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.

推荐答案

好的，我已经解决了！它涉及稍微更改 CSS 并添加一些 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').on('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;
}

为了增加实用性，请将其添加到您的 CSS 中:

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.

简单！

相关文章