小编典典

如何在启用了触摸功能的浏览器中使用触摸来模拟悬停?

html

用这样的HTML:

<p>Some Text</p>

然后像这样的一些CSS:

p {
  color:black;
}

p:hover {
  color:red;
}

如何允许在启用触摸的设备上进行长时间触摸以复制悬停?我
可以更改标记/使用JS等,但是想不出一种简单的方法来做到这一点。


阅读 376

收藏
2020-05-10

共1个答案

小编典典

好的,我已经解决了!它涉及稍微更改CSS并添加一些
JS。

使用jQuery使其变得容易:

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

用英语:当您开始或结束触摸时,请打开hover_effect或
关闭课程。

然后,在您的HTML中,将类悬停添加到您要使用它的任何对象上。
在CSS中,替换以下任何实例:

element:hover {
    rule:properties;
}

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

只是为了增加实用性,还可以将其添加到CSS中:

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

要停止浏览器要求您复制/保存/选择图像或其他操作。

简单!

2020-05-10