Хитро убрать pointer-events со ссылки и вернуть обратно

[7ion]

Добрый день.

Такая задача. В оформлении текста используются невидимые блоки - span.show-on-hover, где color = background-color и где color становится контрастным по .show-on-hover:hover. Вместе с текстом прячутся ссылки и показываются по .show-on-hover:hover a.

Всплыла проблема с мобильными пользователями. Чтобы увидеть текст блока, они в него тыкают. Порой они ненароком попадают в невидимую ссылку и тотчас переходят по ней. Нужно чтобы по ссылке невозможно было перейти с первого тапа, первый тап должен только кинуть :hover на .show-on-hover, и только вторым тапом можно тапнуть по ссылке. При этом для пользователей компьютеров все должно быть по-прежнему, никаких кликов для раскрытия.

Я смастерил такое:

.show-on-hover a { pointer-events: none; }
.show-on-hover:hover a { pointer-events: auto; }

Не помогает - при тапе по невидимой ссылке .show-on-hover ловит :hover и когда ссылка ловит клик, на ней уже разрешены pointer-events. Это реально решить чистым CSS?

 

[Switch74]

а оно у вас так и должно скакать?
вы вроде говорили что меняется цвет текста только
что именно вам нужно сделать?
могу пока наванговать только что-то вроде:
http://jsfiddle.net/umd0y4L9/

[Switch74]

не стоит делать так, убирайте ссылки с помощью позиционирования с блока по которому должны тапнуть мобильные пользователи

[7ion]

3 часа назад, Switch74 сказал:

не стоит делать так, убирайте ссылки с помощью позиционирования с блока по которому должны тапнуть мобильные пользователи

Если я буду их убирать-возвращать, ширина <span> будет прыгать.

Кроме того, возвращать по какому событию?

[Switch74]

по событию hover
если убирать с помощью position и overflow нет возможности, то можно просто скрывать через display

[7ion]

8 минут назад, Switch74 сказал:

по событию hover

Вы же поняли, что я не просто так спрашиваю? :)

Демо https://jsfiddle.net/0tqgn35L/2/

Зайдите с телефона и попробуйте нажать на текст "Второе предложение". Что произойдет:

1. На span кинется hover
2. Сработает показ ссылки по :hover
3. Клик уйдет в ссылку.
4. ?????
5. Не работает!

 

Edited October 1, 2018 by 7ion

[7ion]

8 часов назад, Switch74 сказал:

http://jsfiddle.net/umd0y4L9/

Вы гений :)

Благодаря тому, что вы заюзали transition, клик прилетает в координаты раньше, чем там появится ссылка. Все работает, спасибо!