為什么在移動設備上輕按按鈕周圍會出現暗區

Question

該代碼是： https : //codesandbox.io/s/gatsby-starter-default-og782

我使用styled-component將<a>標記設置為我的按鈕。

例如，

const CloseButton = styled.a`
  position: relative;
  font-size: 30px;
  top: 30vh;
`

我使用帶有transform: translateY(-3px);的<a>標記實現了懸停效果transform: translateY(-3px);

  a {
    outline: none;
    font-size: ${fontSizes.medium};
    ${media.phablet` font-size: ${fontSizes.small};`}
    font-weight: 500;
    display: inline-block;
    text-decoration: none;
    text-decoration-skip-ink: auto;
    color: inherit;
    position: relative;
    transition: ${theme.transition};
    cursor: pointer;
  margin: 0 auto;
  padding: 7px;
    &:hover,
    &:focus
     {
    transform: translateY(-3px);
    }
    -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none; 
  user-select: none;    

  }

現在，它可以在桌面上正常工作。 但是當我在移動設備上查看它時（您可以在此處嘗試演示https://og782.sse.codesandbox.io/ ）

輕按按鈕周圍會出現暗區

有人可以幫我擺脫這個嗎？

Answer 1

這很可能是因為-webkit-tap-highlight-color

您可以嘗試制作透明的樣式：

a {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}