Jump to content
  • 0

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


7ion
 Share

Question

Добрый день.

Такая задача. В оформлении текста используются невидимые блоки - 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?

 

Link to comment
Share on other sites

6 answers to this question

Recommended Posts

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

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

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

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

Link to comment
Share on other sites

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

по событию hover

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

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

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

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

 

Edited by 7ion
Link to comment
Share on other sites

  • 1

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

Link to comment
Share on other sites

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

Вы гений :)

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

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy