如何删除触摸设备上的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;
  }

Answer 1

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

注意：您可以使此匹配您的网站的主色调。例如-#591784

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