这可能吗?没有将我所有的悬停样式转换为mouseover
侦听器,是否可以阻止触摸设备触发 CSS 悬停状态?
我有一个必须在触摸和指针输入上工作的应用程序,它工作得很好,但是在悬停时应用的某些样式在触摸设备上没有意义,因为它们倾向于在用户点击对象后无限期地保持悬停状态。
需要考虑的事项:
对我来说,设备宽度与支持触摸的设备无关,我们在这里使用的触摸屏是桌面尺寸的显示器。
我不想强迫用户在多输入设备上通过触摸进行输入。
这可能吗?没有将我所有的悬停样式转换为mouseover
侦听器,是否可以阻止触摸设备触发 CSS 悬停状态?
我有一个必须在触摸和指针输入上工作的应用程序,它工作得很好,但是在悬停时应用的某些样式在触摸设备上没有意义,因为它们倾向于在用户点击对象后无限期地保持悬停状态。
需要考虑的事项:
对我来说,设备宽度与支持触摸的设备无关,我们在这里使用的触摸屏是桌面尺寸的显示器。
我不想强迫用户在多输入设备上通过触摸进行输入。
我按照上面评论链接中共享的方法解决了这个问题。如果您不使用它,请考虑在这种情况下使用Modernizr 。也想听听其他方法...
作为用户,Blender提到,您可以检查触摸事件,如下所示:
html.touch {
/* Touch Device ~ No Hovers */
}
html.no-touch {
/* Not a Touch is disabled */
}
html.no-touch .element:hover {
opacity:.5;
}
我的解决方案是将 hover-active css 类添加到 HTML 标记中,并在所有 CSS 选择器的开头使用 :hover 并在第一个 touchstart 事件中删除该类。
http://codepen.io/Bnaya/pen/EoJlb
JS:
(function () {
'use strict';
if (!('addEventListener' in window)) {
return;
}
var htmlElement = document.querySelector('html');
function touchStart () {
document.querySelector('html').classList.remove('hover-active');
htmlElement.removeEventListener('touchstart', touchStart);
}
htmlElement.addEventListener('touchstart', touchStart);
}());
HTML:
<html class="hover-active">
CSS:
.hover-active .mybutton:hover {
box-shadow: 1px 1px 1px #000;
}