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

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

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


当前回答

它对我很有帮助:链接

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

其他回答

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

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

试试这个简单的2019 jquery解决方案,虽然它已经有一段时间了;

将这个插件添加到head: src = " https://code.jquery.com/ui/1.12.0/jquery-ui.min.js " 将此添加到js: 美元(“*”)。On ("touchend",函数(e) {$(this).focus();});//应用于所有元素 一些建议的变化是: $(":输入:复选框,")。On ("touchend",函数(e) {(this).focus);});/ /指定元素 美元(“*”)。On ("click, touchend",函数(e) {$(this).focus();});//包含点击事件 Css: body{游标:指针;} //触摸任意位置结束焦点

笔记

将plugin放在bootstrap.js之前,以避免影响工具提示 仅在使用Safari或Chrome的iphone XR ios 12.1.12和ipad 3 ios 9.3.5上测试。

引用:

https://code.jquery.com/ui/

https://api.jquery.com/category/selectors/jquery-selector-extensions/

这可能不是一个完美的解决方案(它是用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");
});

要使当前的答案也在IE11中工作(如果你仍然支持它的话):

@media (hover: hover) and (pointer: fine), only screen and (-ms-high-对比度:active), (-ms-high-对比度:none) { A:悬停{颜色:红色;} } <a href="#" >Some Link</a>

我也遇到过同样的问题(在我使用三星手机浏览器的情况下),因此我偶然发现了这个问题。

感谢Calsal的回答,我发现了一些东西,我相信它将排除所有桌面浏览器,因为我尝试过的移动浏览器似乎都能识别它(参见编译表的截图:CSS指针特征检测表)。

MDN网络文档说明了这一点

指针CSS @media特性可用于应用基于的样式 用户的主要输入机制是否是指向设备,以及 如果是这样,它有多准确

.

我发现指针:coarse对于附件表中的所有桌面浏览器来说都是未知的,但是对于同一个表中的所有移动浏览器来说却是已知的。这似乎是最有效的选择,因为所有其他指针关键字值给出的结果都不一致。

因此,您可以像Calsal描述的那样构造一个媒体查询,但稍加修改。它使用了一种反向逻辑来排除所有的触摸设备。

Sass混合:

@mixin hover-supported {    
    /* 
     * https://developer.mozilla.org/en-US/docs/Web/CSS/@media/pointer 
     * coarse: The primary input mechanism includes a pointing device of limited accuracy.
     */
    @media not all and (pointer: coarse) {
        &:hover {
            @content;
        }
    }
}

a {
    color:green;
    border-color:blue;

    @include hover-supported() {
        color:blue;
        border-color:green;
    }
}

CSS编译:

a {
  color: green;
  border-color: blue;
}
@media not all and (pointer: coarse) {
  a:hover {
    color: blue;
    border-color: green;
  }
}

我在研究这个问题后创建的这个要点中也描述了它。 代码依赖于实证研究。

更新(2018): 在撰写此更新时,2018-08-23,并由@DmitriPavlutin指出,这种技术似乎不再适用于Firefox桌面。

更新(2021): 有人向我指出,它似乎在Firefox 87中工作。