如何去除HTML, CSS中的点击效果

Question

开发者/程序员你好，

下午好，我正在用PHP,JavaScript,HTML和CSS开发一个网站。我有个问题。当我在手机上运行网站时，当点击任何项目，按钮时，它会显示效果，但我不想要这种效果。

如何移除按钮点击效果/按钮点击效果。

• 在桌面按钮点击效果不显示

按钮点击移动设备效果

Answer 1

点击"效果似乎是一个点击高亮的颜色。

将以下css添加到html标签中应该可以达到目的:

html {
-webkit-tap-highlight-color: transparent;
}

设置点击的高亮颜色为透明。

来源:https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-tap-highlight-color

Answer 2

你可以在你的css文件中使用媒体查询来避免你想在触摸设备中避免的事情。有两种方法:

/* for devices that can hover, like laptop */
@media (hover: hover) {
.your-button-class {
styles...
}
}
/* for devices that can not hover, like phones*/
@media (hover: none) {
.your-button-class {
styles...
}
}