如何删除触摸设备上的css点击效果



我目前正在研究这个导航菜单的样式
它在浏览器上运行良好。至于手机,有一种奇怪的蓝色onclick效应。如何移除它
屏幕截图:
单击之前https://i.stack.imgur.com/fugWg.jpg
单击https://i.stack.imgur.com/AmOEU.jpg

这是我的代码:

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;
}
a {
-webkit-tap-highlight-color: transparent;
}

注意:您可以使其与网站的主颜色相匹配。例如-#591784

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

最新更新