如何在触摸设备上去除CSS点击效果？

Question

我目前正致力于这个导航菜单的样式。
它在浏览器上运行得很好。至于手机端，存在一个奇怪的蓝色onclick效果。 如何去掉它？
屏幕截图：
点击之前 https://imgur.com/Ovu5v7P
点击之后 https://imgur.com/lOwpicT

以下是我的代码：

React
import { Link, NavLink } from "react-router-dom";//these are just <a>

<div className="drawerNav" onClick={() => setDrawerOpen(false)}>
            <a className="closebtn">Close</a>
            <div className="drawerNav-content">
              <Link to="/">Home</Link>
              <Link to="/about">About</Link>
              <Link to="/post">Post</Link>
              <a onClick={handleAuth}>{signed ? "Logout" : "Login"}</a>
            </div>
</div>
CSS(styled components)
.drawerNav {
    a {
      padding: 8px;
      text-decoration: none;
      font-size: 36px;
      color: #fff;
      display: block;
    }
  }
  .drawerNav-content {
    position: relative;
    top: 25%;
    width: 100%;
    text-align: center;
    margin-top: 30px;
  }

- Sam Kondori

---

请查看 https://dev59.com/WVcO5IYBdhLWcg3w7lrq 上提到的 jsFiddle：https://jsfiddle.net/t4ykshst/3/。请确认是否解决了您的问题。 - Sayyed Dawood

Answer 1

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

注意：您可以将此与您网站的主要颜色匹配。例如 - #591784

-webkit-tap-highlight-color: #591784;

- Nice18

---

非常感谢您。我不知道这个（像悬停等）有一个名称。 - Sam Kondori