试试这个(我在这个例子中使用background和background-color):

var ClickEventType = ((document.ontouchstart !== null) ? 'click' : 'touchstart');

if (ClickEventType == 'touchstart') {
            $('a').each(function() { // save original..
                var back_color = $(this).css('background-color');
                var background = $(this).css('background');
                $(this).attr('data-back_color', back_color);
                $(this).attr('data-background', background);
            });

            $('a').on('touchend', function(e) { // overwrite with original style..
                var background = $(this).attr('data-background');
                var back_color = $(this).attr('data-back_color');
                if (back_color != undefined) {
                    $(this).css({'background-color': back_color});
                }
                if (background != undefined) {
                    $(this).css({'background': background});
                }
            }).on('touchstart', function(e) { // clear added stlye="" elements..
                $(this).css({'background': '', 'background-color': ''});
            });
}

css:

a {
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

试试这个:

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

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

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

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

这也是一个可能的解决方案，但你必须通过你的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>

源

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

试试这个简单的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/

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

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