如何删除/忽略:悬停css风格的触摸设备

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

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

所以，(如何)我可以删除/忽略所有CSS:悬停声明在一次(而不必知道每一个)有他们声明后触摸设备?

当前回答

这也是一个可能的解决方案，但你必须通过你的css和添加一个.no-touch类在你的悬停样式。

Javascript:

if (!("ontouchstart" in document.documentElement)) {
document.documentElement.className += " no-touch";
}

CSS例子:

<style>
p span {
    display: none;
}

.no-touch p:hover span {
    display: inline;
}
</style>
<p><a href="/">Tap me</a><span>You tapped!</span></p>

源

附注:但是我们应该记住，市场上有越来越多的触摸设备，它们同时也支持鼠标输入。

2015-11-05 17:55:38

其他回答

悬停CSS媒体功能来拯救!仅使用CSS，当设备没有悬停功能时，您可以覆盖样式。

下面的演示由现代触摸设备支持。

/* hover query styles */ a { color: red; font-size: 3em; } a:hover { color: blue; } @media (hover: none) { a:link, a:visited { color: blue; text-decoration: none; border: 0.1em solid currentColor; padding: 0 0.1em; } } /* used to show if demo browser has hover capabilities */ .detection:before { content: 'UNKNOWN'; color: red; } @media(hover) { .detection:before { content: 'YES'; color: green; } } @media (hover: none) { .detection:before { content: 'NO'; } } Hoverable pointer detected: <h3>Experiences between device hover capabilities</h3> If the device has a hover capability, the link below: <ul> <li>should be red</li> <li>should be blue when hovered</li> </ul> If the device does not have a hover capability, the link below: <ul> <li>should always be blue</li> <li>should be surrounded by a blue border</li> </ul> <a href="https://www.google.com">Link</a>

注意:请记住，由于Surface PC的主要输入(功能)是鼠标，它最终将是一个蓝色链接，即使它是一个分离的(平板电脑)屏幕。浏览器将(应该)总是默认使用最精确的输入功能。

2017-03-22 03:04:26

它对我很有帮助:链接

function hoverTouchUnstick() {
    // Check if the device supports touch events
    if('ontouchstart' in document.documentElement) {
        // Loop through each stylesheet
        for(var sheetI = document.styleSheets.length - 1; sheetI >= 0; sheetI--) {
            var sheet = document.styleSheets[sheetI];
            // Verify if cssRules exists in sheet
            if(sheet.cssRules) {
                // Loop through each rule in sheet
                for(var ruleI = sheet.cssRules.length - 1; ruleI >= 0; ruleI--) {
                    var rule = sheet.cssRules[ruleI];
                    // Verify rule has selector text
                    if(rule.selectorText) {
                        // Replace hover psuedo-class with active psuedo-class
                        rule.selectorText = rule.selectorText.replace(":hover", ":active");
                    }
                }
            }
        }
    }
}

2015-07-06 14:53:28

你可以使用Modernizr JS(也见这个StackOverflow的答案)，或自定义JS函数:

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');
}

来检测浏览器对touch事件的支持，然后分配一个常规的CSS属性，用html遍历元素。无接触类，像这样:

html.touch a {
    width: 480px;
}

/* FOR THE DESKTOP, SET THE HOVER STATE */
html.no-touch a:hover {
   width: auto;
   color:blue;
   border-color:green;
}

2016-07-26 15:25:06

试试这个:

@media (hover:<s>on-demand</s>) {
    button:hover {
        background-color: #color-when-NOT-touch-device;
    }
}

更新:不幸的是，W3C已经从规范中删除了这个属性(https://github.com/w3c/csswg-drafts/commit/2078b46218f7462735bb0b5107c9a3e84fb4c4b1)。

2016-04-08 22:59:28