像这样的一些 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;
}
停止浏览器要求您复制/保存/选择图像或其他内容。
简单!
关于javascript - 如何在支持触摸的浏览器中模拟带有触摸的悬停?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/2851663/