处理触摸设备和hover效果

我尝试删除或阻止触摸设备上的所有hover效果。 我尝试使用几个脚本，但它对我不起作用。 如何使用开发工具对其进行测试？ 我尝试这样的脚本，但有一些错误。 无法读取null的属性’addEventListener’。 但它在这里工作codepen有错误导致dom树还没有加载吗？

 $(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; } 

Answer 1

要删除触摸设备上的所有hover效果，您可以使用CSS媒体查询来确保设备在应用任何:hover样式之前完全响应hover，方法是将它们放在@media (hover: hover)

 @media (hover: hover){ .hover-me:hover { background: yellow; } }