Kei*_* DC 5 javascript css jquery
每个人都在推动功能检测很长一段时间.我想检测访问者的浏览器是否支持:hover伪类.我的理解是,有足够的(如果不是大多数)移动设备不支持悬停,所以我想相应地设置我的事件监听器.但是如果没有移动侦测,我不确定如何实现这一点,到目前为止我还没有通过Google或SO找到任何东西.
也许类似于问题#8981463
$(function() {
var canHover = $(document).is(":hover");
});
直到下周我才能在移动设备上测试这个.
思考？
man*_*elf 13
现在有一个支持良好的媒体查询来检测是否支持悬停： https://developer.mozilla.org/en-US/docs/Web/CSS/@media/hover
您可以将其与Window.matchMedia一起使用： https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia
然后你会使用：
if (window.matchMedia( "(hover: none)" ).matches) {
// hover unavailable
}
没有is(':hover'),你不能用javascript检测CSS伪类,因为它们不是DOM的一部分.
但是,您可以检测某些仅在触摸屏上可用的事件并采取相应措施,现代化工具会执行类似的操作
if ('ontouchstart' in document.documentElement) {
document.documentElement.classList.add('touch');
} else {
document.documentElement.classList.add('no-touch');
}
它会向<html>元素添加类,告诉你设备是否有触摸屏,所以你可以在CSS中做这样的事情
.no-touch .element:hover {color: red;} // for users with a mouse
.touch .element {color: blue;} // for touch devices
| 归档时间： |
|
| 查看次数： |
3915 次 |
| 最近记录： |