如何去除HTML、CSS中的点击效果答案

【问题标题】：How to remove click effect in HTML, CSS如何去除HTML、CSS中的点击效果
【发布时间】：2023-02-02 02:58:35
【问题描述】：

你好开发者/程序员，

下午好，我正在使用PHP、JavaScript、HTML和CSS开发网站。我有个问题。当我在移动设备上运行网站并单击任何项目时，按钮就会显示效果，但我不想要那种效果。

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

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

button click effect in mobile

【问题讨论】：

请添加代码 sn-p

标签： javascript html css button onclick

【解决方案1】：

“点击”效果似乎是点击突出显示颜色。

将以下 css 添加到您的 html 标签应该可以解决问题：

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

它将点击突出显示颜色设置为透明。

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

【讨论】：

【解决方案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...
  }
}

【讨论】：