如何删除/忽略：在触摸设备上悬停css样式 [英] How to remove/ignore :hover css style on touch devices

问题描述

如果用户通过触摸设备访问我们的网站，我想忽略所有：hover CSS声明。因为：hover CSS没有意义，甚至如果平板电脑在点击/点击触发它，甚至可能会令人不安，因为它可能会坚持，直到元素失去焦点。说实话，我不知道为什么触摸设备觉得需要触发：hover 在第一位 - 但这是现实，所以这个问题也是现实。 / p>

  a：hover {
 color：blue; 
 border-color：green; 
 //等>忽略所有的触摸设备
} 
  

在触摸设备声明之后，我立即删除/忽略所有CSS ：hover 声明（不必知道每个声明）。 $ b

解决方案

您可以使用Javascript删除包含：hover 的所有CSS规则。这在几乎任何触摸设备上都可以工作。

  var touch ='ontouchstart' documentElement 
 || （navigator.MaxTouchPoints> 0）
 || （navigator.msMaxTouchPoints> 0）; 
 
 if（touch）{// remove all：hover stylesheets 
 try {//防止浏览器上的异常不支持DOM styleSheets正确
 for（var si in document.styleSheets） {
 var styleSheet = document.styleSheets [si]; 
 if（！styleSheet.rules）continue; 
 
 for（var ri = styleSheet.rules.length  -  1; ri> = 0; ri--）{
 if（！styleSheet.rules [ri] .selectorText）continue; 
 
 if（styleSheet.rules [ri] .selectorText.match（'：hover'））{
 styleSheet.deleteRule（ri）; 
} 
} 
} 
} catch（ex）{} 
} 
  

注意：样式表必须托管在同一网站/域（即没有CDN）上。如果他们不是，下一个最简单的事情是用一个 body.notouch 选择器前面悬停规则： body.notouch .myElement：hover {...} 并添加 notouch 类到具有Javascript的正文。

  if（！（document.documentElement中的'ontouchstart'）
&&！navigator.MaxTouchPoints 
& navigator.msMaxTouchPoints）{
 document.body.className + ='notouch'; 
} 
  

警告＃2：方法将混合鼠标+触摸笔记本电脑识别为触摸设备，并禁用：鼠标悬停样式，这会对一小部分用户产生负面影响。很抱歉，这是一个相当复杂的问题，请参阅 http://stackoverflow.com/a/18001239/388994 。 p>

一个可能的解决方法是在 touchstart notouch c $ c>或 mousemove 事件触发。

I want to ignore all :hover CSS declarations if a user visits our website via touch device. Because the :hover CSS does not make sense, and it can even be disturbing if a tablet triggers it on click/tap because then it might stick until the element loses focus. To be honest, I don't know why touch devices feel the need to trigger :hover in first place - but this is reality, so this problem is reality as well.

a:hover {
   color:blue;
   border-color:green;
   // etc. > ignore all at once for touch devices
}

So, (how) can I remove/ignore all CSS :hover declarations at once (without having to know each one) for touch devices after having them declared?

解决方案

You can remove all the CSS rules containing :hover using Javascript. This should work on pretty much any touch device.

var touch = 'ontouchstart' in document.documentElement
            || (navigator.MaxTouchPoints > 0)
            || (navigator.msMaxTouchPoints > 0);

if (touch) { // remove all :hover stylesheets
    try { // prevent exception on browsers not supporting DOM styleSheets properly
        for (var si in document.styleSheets) {
            var styleSheet = document.styleSheets[si];
            if (!styleSheet.rules) continue;

            for (var ri = styleSheet.rules.length - 1; ri >= 0; ri--) {
                if (!styleSheet.rules[ri].selectorText) continue;

                if (styleSheet.rules[ri].selectorText.match(':hover')) {
                    styleSheet.deleteRule(ri);
                }
            }
        }
    } catch (ex) {}
}

Caveat: stylesheets must be hosted on the same site/domain (that means no CDNs). If they aren't, the next easiest thing is prepending your hover rules with a body.notouch selector like so: body.notouch .myElement:hover { ... } and adding a notouch class to the body with Javascript.

if (!('ontouchstart' in document.documentElement)
    && !navigator.MaxTouchPoints
    && !navigator.msMaxTouchPoints) {
    document.body.className += ' notouch';
}

Caveat #2: detecting touch devices using this method identifies mixed mouse+touch laptops as touch devices and disables :hover styles for them, which negatively affects a small portion of users. Unfortunately, this is a fairly compicated issue, see http://stackoverflow.com/a/18001239/388994 .

One possible workaround might be to add or remove the notouch class when a touchstart or a mousemove event fires.

这篇关于如何删除/忽略：在触摸设备上悬停css样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！