如何使点击突出显示仅显示在父元素上，而不显示在子元素上？

Question

假设我在 iOS 上呈现此标记：

<a href="#" class="book">
  <span class="title">Robinson Crusoe</span>
  <span class="author">Daniel Defoe</span>
</a>

当用户在该元素内部点击时，我希望小灰色点击高亮显示 仅在父元素 link 上，而不是在单个元素 <span> 他们点击的标签。

所以不是这个：

+-----------+
|###########|
|           |
+-----------+

我希望用户看到这个：

+-----------+
|###########|
|###########|
+-----------+

我试验过这样的代码：

.book {
  -webkit-tap-highlight-color: initial;
}

.book * {
  -webkit-tap-highlight-color: none;
}

该代码会抑制子 span 的高亮，但它也会抑制父 span 的高亮，所以最后什么都没有高亮，这不是我想要的。

我试过谷歌搜索，但似乎找不到任何东西，除了 this，这似乎与我的问题无关。

有没有人尝试过这样做？

Answer 1

终于想出了一个方法来做到这一点（在试验伪 类 之后）：

.book {
  -webkit-tap-highlight-color: transparent;
}

.book:active {
  background-color: #efefef /* tap color */;
}

之所以有效，是因为 iOS Safari 应用了 :active 样式 onTouchStart。