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

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

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


当前回答

在浏览了前面的答案之后,这个方法对我很有效。 这个悬停只适用于有悬停功能的桌面。如果这个类/id有任何其他悬停代码,则删除

@media (hover: hover) {
  .toggle-label:hover {
     background-color: #69c9ff;
     color: #ffffff;
  }
}

其他回答

悬停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'; } } <p>Hoverable pointer detected: <span class="detection"></span></p> <h3>Experiences between device hover capabilities</h3> <p>If the device has a hover capability, the link below:</p> <ul> <li>should be red</li> <li>should be blue when hovered</li> </ul> <p>If the device does not have a hover capability, the link below:</p> <ul> <li>should always be blue</li> <li>should be surrounded by a blue border</li> </ul> <p><a href="https://www.google.com">Link</a></p>

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

它对我很有帮助:链接

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

这可能不是一个完美的解决方案(它是用jQuery的),但也许它是一个方向/概念的工作:如何反过来做呢?这意味着在默认情况下取消:hover css状态,并在文档的任何地方检测到鼠标移动事件时激活它们。当然,如果有人停用js,这是行不通的。还有什么会反对这样做呢?

也许是这样的:

CSS:

/* will only work if html has class "mousedetected" */
html.mousedetected a:hover {
   color:blue;
   border-color:green;
}

jQuery:

/* adds "mousedetected" class to html element if mouse moves (which should never happen on touch-only devices shouldn’t it?) */
$("body").mousemove( function() {
    $("html").addClass("mousedetected");
});

在浏览了前面的答案之后,这个方法对我很有效。 这个悬停只适用于有悬停功能的桌面。如果这个类/id有任何其他悬停代码,则删除

@media (hover: hover) {
  .toggle-label:hover {
     background-color: #69c9ff;
     color: #ffffff;
  }
}

试试这个:

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

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