Как я могу сделать так, чтобы выделение касания отображалось только на родительском элементе, а не на дочерних элементах?

Скажем, я визуализирую эту разметку на iOS:

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

Когда пользователь нажимает внутри этого элемента, я хочу, чтобы небольшая серая подсветка касания появлялась только на родительской ссылке, а не на отдельном теге <span>, на который он нажал.

Итак, вместо этого:

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

Я хочу, чтобы пользователь увидел это:

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

Я экспериментировал с таким кодом:

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

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

Этот код подавляет выделение дочерних диапазонов, но также подавляет выделение родительского диапазона, так что в итоге ничего не выделяется, а это не то, чего я хотел.

Я пробовал гуглить, но не могу найти ничего, кроме this, который на самом деле не имеет отношения к моему вопросу.

Кто-нибудь имел опыт попытки сделать это?


ios html css mobile-webkit
person Jonathan    schedule 26.01.2015    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Наконец-то нашел способ сделать это (после экспериментов с псевдоклассами):

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

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

Работает, потому что iOS Safari применяет :active стиль onTouchStart.

person Jonathan    schedule 18.02.2015