Html 使用 Cursor:Pointer 触摸/按下对象时禁用蓝色突出显示
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/25704650/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Disable Blue Highlight when Touch/Press object with Cursor:Pointer
提问by Ulad Kasach
There is a blue highlight that appears whenever a Div that has the cursor:pointer property applied is touched in Chrome. How can we get rid of it?
每当在 Chrome 中触摸应用了 cursor:pointer 属性的 Div 时，就会出现一个蓝色突出显示。我们怎样才能摆脱它？
I have tried the following:
我尝试了以下方法：
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
But they do not effect the blue highlighting on press of a cursor.
但它们不会影响按下光标时的蓝色突出显示。
回答by Ulad Kasach
-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
Takes care of the problem, as it sets the highlight color transparent.
解决了这个问题，因为它将高光颜色设置为透明。
Source: http://samcroft.co.uk/2012/alternative-to-webkit-tap-highlight-color-in-phonegap-apps/
来源：http: //samcroft.co.uk/2012/alternative-to-webkit-tap-highlight-color-in-phonegap-apps/
回答by Oboo Cheng
As far as I have known,Vlad K's answer could cause problems in some android devices.Better solution:
据我所知，Vlad K 的回答可能会导致某些 android 设备出现问题。更好的解决方案：
-webkit-tap-highlight-color: rgba(0,0,0,0);
-webkit-tap-highlight-color: transparent;回答by asith
Simply add this to your stylesheet and simply add the class="no_highlights"attribute to the element you wish to apply this class to.
只需将此添加到您的样式表中，然后将class="no_highlights"属性添加到您希望应用此类的元素。
no_highlights{
-webkit-tap-highlight-color: transparent;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
or you can do this globally for all the elements by removing class name and doing this.
或者您可以通过删除类名并执行此操作来对所有元素全局执行此操作。
button,
textarea,
input,
select,
a{
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-webkit-tap-highlight-color: transparent;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
Thanks :)
谢谢 ：）
