html li 不需要的触摸背景

Question

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

这是它的样子

(第二项"Linie 42")

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

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

不过这似乎与这些css属性无关。

而且这只发生在移动浏览器上。我在 Chrome for Windows / Safari on OS X.

上没有这个

有什么想法吗？

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;
}

html li 不需要的触摸背景

html li unwanted background on touch

html

javascript

css

mobile

web-applications