用这样的HTML:
<p>Some Text</p>
然后像这样的一些CSS:
p { color:black; } p:hover { color:red; }
如何允许在启用触摸的设备上进行长时间触摸以复制悬停?我 可以更改标记/使用JS等,但是想不出一种简单的方法来做到这一点。
好的,我已经解决了!它涉及稍微更改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; }
要停止浏览器要求您复制/保存/选择图像或其他操作。
简单!