Jquery 处理触摸装置和悬停效果_Jquery_Css_Hover_Touch

Jquery 处理触摸装置和悬停效果

jquery css

Jquery 处理触摸装置和悬停效果,jquery,css,hover,touch,Jquery,Css,Hover,Touch,我尝试移除或阻止触摸设备上的所有悬停效果。我尝试使用几个脚本，但它不适合我。如何使用开发工具对其进行测试？我尝试这样的脚本，但有一些错误。无法读取null的属性“addEventListener”。但它在这里起作用是否存在导致dom树尚未加载的错误 <html class="hover-active"> $(window).on('load', function() { if (!('addEventListener' in window)) {

我尝试移除或阻止触摸设备上的所有悬停效果。我尝试使用几个脚本，但它不适合我。如何使用开发工具对其进行测试？我尝试这样的脚本，但有一些错误。无法读取null的属性“addEventListener”。但它在这里起作用是否存在导致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);
    });

我还尝试使用Modernizer，它只适用于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-me:hover {
     background: yellow;
 }
html.touch .hover-me:hover {
   pointer-events: none !important;
   cursor: pointer;

}

要删除触摸设备上的所有悬停效果，可以使用CSS媒体查询确保设备在应用任何

：hover

样式之前完全响应悬停，方法是将它们放置在

@媒体（hover:hover）

可能的重复您是否只是试图阻止css悬停效果？我需要删除触摸设备上的所有悬停效果。

  .hover-me:hover {
     background: yellow;
 }
html.touch .hover-me:hover {
   pointer-events: none !important;
   cursor: pointer;

}

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