我刚学会用 CSS 制作动画。在桌面版 Chrome 上一切正常。但是当我在 Chrome for Android 上查看它时 - 单击时会出现一些奇怪的叠加效果。
.btn {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
display: block;
position: relative;
margin: 0 auto;
outline: none;
border: none;
background-color: #ff8800;
padding: 25px 65px;
font-size: 25px;
text-transform: uppercase;
border-radius: 25px;
box-shadow: 0 8px #ff6600;
cursor: pointer;
top: 0;
transition: all .3s;
}
.btn:hover {
top: 3px;
box-shadow: 0 5px #ff6600;
}
.btn:active {
top: 8px;
box-shadow: none;
}
<button class="btn">Click Me!</button>
截图:
正常状态:
点击时:
我怎样才能摆脱移动浏览器上的这种奇怪的覆盖?谢谢。
最佳答案
将 -webkit-tap-highlight-color: transparent;
添加到您的 .btn
类(如果需要,甚至可以全局添加到 body
以防止在所有可点击元素上发生这种情况)。
引用:https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-tap-highlight-color
关于html - 移动浏览器上奇怪的 CSS '' 叠加效果'',我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49955474/