javascript - html li 不需要的触摸背景

Question

我目前正在一个网站上工作，我遇到了一个奇怪的列表项行为。只要我触摸 ul 元素内的 li 元素，列表项就会获得背景(iOS saferi lightgrey 和 android chrome 某种蓝色)。看看这个:

原来是这样的

(第二条“林涅42”)

我尝试按照 css 样式将其删除:

li, li:hover, li:active, li:focus {
  background-color: transparent;
  outline: none;
}

然而它似乎与这些 css 属性无关。

这也只发生在移动浏览器上。我在 OS X 上的 Chrome for Windows/Safari 上没有这个。

有什么想法吗？

Answer 1

Maybe you need to override -webkit-touch-callout as When a target is touched and held on iPhone OS, Safari displays a callout information about the link. This property allows disabling that behavior.

试试这个 css 属性:

* {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0)!important;
  -webkit-touch-callout: none!important;
  -webkit-user-select: none!important;
}