悬停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的主要输入(功能)是鼠标，它最终将是一个蓝色链接，即使它是一个分离的(平板电脑)屏幕。浏览器将(应该)总是默认使用最精确的输入功能。

2020解决方案- CSS只-没有Javascript

使用带有媒体指针的媒体悬停将帮助您解决此问题。在chrome Web和android手机上测试。我知道这个老问题，但我没有找到像这样的答案。

@media (hover: hover) and(指针:fine) { A:悬停{颜色:红色;｝ ｝ <a href="#" >Some Link</a>

它对我很有帮助:链接

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

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

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

你可以使用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;
}

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

感谢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中工作。