处理触摸装置和悬停效果 [英] Deal with touch desvices and hover effects
问题描述
我尝试删除或防止触摸设备上的所有悬停效果.我尝试使用多个脚本，但是它对我不起作用.如何使用开发工具进行测试?我尝试这样的脚本，但是有一些错误.无法读取null的属性"addEventListener".但这在这里有效 codepen 是因为dom树尚未加载而导致错误?
I try to remove or prevent all hover effect on a touch device. I try to use several scripts, but it does not work for me. How can I test it, with dev tools? I try such script but have some error. Cannot read property 'addEventListener' of null. But it works here codepen There is error cause the dom tree has not loaded yet?
<html class="hover-active">
$(window).on('load', function() {
if (!('addEventListener' in window)) {
return;
}
var htmlElement = document.querySelector('html');
function touchStart() {
htmlElement.classList.remove('hover-active');
htmlElement.removeEventListener('touchstart', touchStart);
}
htmlElement.addEventListener('touchstart', touchStart);
});
我也尝试这个
if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)){}
我也尝试使用modernizr，它仅适用于html.touch和html.no-touch内的每个选择器
Also I try use modernizr, it works only for each selector inside html.touch and html.no-touch
function is_touch_device() {
return 'ontouchstart' in window // works on most browsers
|| navigator.maxTouchPoints; // works on IE10/11 and Surface
};
if ( is_touch_device() ) {
$('html').addClass('touch')
} else {
$('html').addClass('no-touch')
}
html.touch .hover-me:hover {
pointer-events: none !important;
cursor: pointer;
}
html.touch a:hover {
pointer-events: none !important;
cursor: pointer;
}
/* FOR THE DESKTOP, SET THE HOVER STATE */
html.no-touch .hover-me:hover {
width: auto;
color:blue;
background:green;
}
html.no-touch a:hover {
width: auto;
color:blue;
background:green;
}
但是我需要删除所有:hover选择器，*不起作用.还行不通.
But I need remove all :hover selector, the * does not work. Also It's not working.
.hover-me:hover {
background: yellow;
}
html.touch .hover-me:hover {
pointer-events: none !important;
cursor: pointer;
}
推荐答案
要删除触摸设备上的所有悬停效果，可以在放置任何:hover样式之前，使用CSS媒体查询来确保设备对悬停做出完全响应.将它们放在@media (hover: hover)
To remove all hover effects on touch devices, you can use CSS Media Queries to make sure the device fully responds to hover before applying any :hover styles by placing them inside @media (hover: hover)
@media (hover: hover){
.hover-me:hover {
background: yellow;
}
}
这篇关于处理触摸装置和悬停效果的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
