我尝试删除或阻止触摸设备上的所有悬停效果。我尝试使用多个脚本，但它对我不起作用。我如何使用开发工具对其进行测试？我尝试了这样的脚本但是有一些错误。无法读取 null 的属性“addEventListener”。但它在这里有效 codepen dom树还没有加载错误？
<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 中的每个选择器
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 选择器，* 不起作用。它也不起作用。
.hover-me:hover {
background: yellow;
}
html.touch .hover-me:hover {
pointer-events: none !important;
cursor: pointer;
}
最佳答案
要消除触摸设备上的所有悬停效果，您可以使用 CSS 媒体查询来确保设备在应用任何 :hover 样式之前完全响应悬停，方法是将它们放置在 @media (悬停:悬停)
@media (hover: hover){
.hover-me:hover {
background: yellow;
}
}
关于jquery - 处理触摸设备和悬停效果，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42216045/