Добрый день!

Ребята, если вопрос можно решить на CSS, буду безумно счастлив!  Но подозреваю, что это можно сделать только на JavaScript.

Есть ссылка с CSS псевдоклассом :hover (отображает скрытый слой при наведении на нее, как выпадающий пункт меню).

Загвоздка в том, что на планшетах и прочих тачскринах нет мышки, так что тут наведение курсора это еще и клик. Нам надо каким-либо методом дать понять, что если страничка открыта с такого устройства, то первый клик надо обрабатывать как наведение курсора, а уже если будет второй клик - его уже считаем за клик. Ну, а для нормальных компов ничего менять не надо, наведение - это наведение, клик - это клик.

Повторюсь, если нечто такое возможно на CSS - это будет круто! Заранее огромная благодарность за подсказки.

Что-нибудь такое

Правда трогательного девайса под рукой нету :( Кто проверит?

Это сообщение отредактировал(а) ksnk - 18.5.2015, 22:21

определить по :active то же, что и по :hover
типа https://jsfiddle.net/hotLrfdz/
на моем трогательном телефоне работает

Добавлено через 1 минуту и 9 секунд
правда разницы первый-второй не будет

https://jsfiddle.net/hotLrfdz/6/

Добавил туда ссылки в 4-й пункт. ошибся в своем посте, не :focused, а : focus

Это сообщение отредактировал(а) ksnk - 18.5.2015, 22:20

Взял для тестов айпад жены. Как же меня все это бесит, все эти планшетники и телефоны...   

baldina, не работает вообще ничего. Почему - ума не приложу. Буду ковыряться...

ksnk, Вы меня немного не так поняли. Теми ссылками, которые с тачскринов не должны сразу кликаться, являются именно пункты "one", "two", "thee". Ну хоть технической сути это не меняет.

В общем, смотрю что :hover срабатывает только в момент нажатия пальцем... Я был убежден что он остается висеть там до касания в следующем месте. В итоге происходит полная лажа. Я раньше не замечал этого, т.к. пункты меню были ссылками, и сразу осуществлялся переход на другую страницу, меню только мелькало...

Спасибо за помощь, буду разбираться. Если появятся какие новости, отпишусь.

Технически - это и не ссылки. Ссылки (тег А) - в четвертом пункте https://jsfiddle.net/hotLrfdz/6/. При первом touch они становятся `focused`, при втором - кликаются. Мне казалось, нужно избежать автоматического клика по прикосновению, разве не так? На андроиде, вроде так.

В моем случае, "one", "two", "thee" - все это тоже ссылки. Меню раскрывается при наведении курсора. И вот чтоб на планшете раскрыть меню за неимением курсора, по нему надо кликнуть. И получается что меню то открывается, но в то же время срабатывает и клик по ссылке. В этом и проблема.


По ссылкам "one", "two", "thee". Ссылки из самого выпадающего списка открываются как обычно. Т.е. еще раз, чтобы открыть список - надо навести на него курсор. А в планшетах и прочем для этого получается что надо кликнуть по "one", "two", "thee" - но у меня они являются в то же время и обычными ссылками. На ПК, для которого изначально все и проектировалось, таких проблем по ясным причинам и не возникало. Надеюсь, теперь понятно будет. Моя вина, поспешил, надо было пример сразу прикреплять.

Это все можно делать на JavaScript, но не хочу сайт лишний раз грузить, пока что изучаю новые псевдоклассы CSS и просто последние нововведния, может повезет. 

Ничего подходящего на CSS найти не удалось. Было принято решение сделать проверку юзерагента на PHP - если он из списка мобильных приложений, отдаем JavaScript версию, для всех остальных нормальных пацанов - человеческую CSS.

Не то чтобы я не любил JavaScript, он крут. Но такие вещи должны работать на CSS, ИМХО!

Спасибо всем за помощь!     

Да нет, вы ошибаетесь. ЦСС - дизайн, анимация, все что угодно кроме "поведения". И не был он для этого придуман. То что вам не хватает какой-то функциональности, ну так извините, невозможно сделать средство от всего.


Привыкайте, скоро большинство устройств будут тачскрин


Бывают лаптопы с тачскрином. Даже дисплеи с тачскрином сейчас есть. А на телефон можно установить линукс и подключить мышку.

По моему более правильно будет разработать решение, которое одинаково работает на тачскрине и без него

sQu1rr, ну, это ваше мнение. Давайте еще ссылки при наведении курсора и активные элементы форм на JS подсвечивать будем. Это разве не "поведение"?   

Ну в таком случае анимация тоже "поведение" - там же что-то двигается.

Что я имел ввиду так то что css - это, грубо говоря, список аксиом - как что выглядит если элемент имеет определенные атрибуты. Когда кто-то наводит на элемент - его селектор меняется, и применяется другой стиль. То что вы пытаетесь сделать - не относится к "правилам" описанным в цсс, вы хотите, что бы первое нажатие производило одно *действие* а второе - другое.

поддержу sQu1rr
меню на css это непредвиденное использование (типа метапрограммирования в c++)
хотя оно и имеет приятные свойства, но все же нарушает цели css и не способствует структурному подходу
код такого меню настолько же понятен, насколько понятны метапрограммы на шаблонах С++

оффтоп, вспомнилось просто

Насколько я понимаю, синонимом "поведения" будет "реакция". Анимация ни на что не реагирует, она живет своей собственной жизнью.


Тема на самом деле очень холиварная. Если говорить об исходном CSS - возможно. Современный CSS3, грядущий CSS4 - ИМХО, это уже совсем другие вещи под тем же названием. Это как PHP раньше назывался Personal Home Page.  

Вот что пишет Вики про CSS:



Думаю, с этим ни кто не станет спорить. Это относится даже к самой первой версии CSS. Меняем стиль, и наше выпадающее меню превращается в развернутое. Разве речь идет не о внешнем виде? Я понимаю что тут грань внешний вид / поведения весьма тонкая. Но опять же, подсветка ссылок, активных элементов форм, та же смена курсора - ни кто не скажет что это не CSS, но разве это не можно назвать поведением? Мы не затрагиваем данные, мы работаем только с внешним видом.

Или, например строки в таблицах. Не важно, отображается таблица таблицей или на слоях. Подсветить строку, над которой находится курсор - это здравая мысль. И это поведение. Вы сделаете это на JavaScript?  

Вы, на мой взгляд, смотрите на это не с правильно стороны.

Ваше объяснение: Я навожу курсор на ссылку, цсс ее посвечивает. Вывод: цсс - поведение.

Мое объяснение: Я новожу курсор на ссылку, браузер меняет аттрибуты ссылки (добовляет :hover псевдокласс), применяется новое правило цсс. При этом цсс служит просто сводкой правил: как что выглядит при определенных аттрибутах. Сам же цсс эти аттрибуты не меняет, и не только не знает как менять - знать не должен.

Тут можно вспомнить, что ЦСС позволяет вставлять определенный контент, до или после селектора ::before ::after, но опять же - это безусловное правило, основанное на селекторе. Аттрибут тага меняется, и правило больше не действует.


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