Как поступить с:hover на touch устройствах?

Question

[sabanovvv]

Есть сайт,где в портфолио при наведении появляется дополнительная информация.
Как адаптировать под touch устройства,чтобы при клике на работу появлялась доп.информация?
uni.webj.esy.es

Answer 1

[Вадим Белкин]

Можно :focus использовать (если элемент не является ссылкой на другую страницу). Либо скриптом по клику класс добавлять (по клику на сам элемент, если он не ссылка, либо доп.кнопку на блоке с работой расположить, по клику на которую будет добавляться класс).

Если в появившейся информации есть ссылки или любые кликабельные элементы, то лучше скриптом раскрытие делать, поскольку :focus, :hover, :active не подойдут (не дадут сделать клик в появившемся блоке, он просто скроется)

Comments

[sabanovvv]

да,при наведении появляется блок с информацией где есть ссылка на открытие модального окна

[Вадим Белкин]

А сам блок кликабельный (ссылка или кнопка), ведет на какую-то страницу?

[sabanovvv]

uni.webj.esy.es в разделе портфолио
наводишь на работу,появляется доп.информация где есть ссылка на открытие модального окна(плагин fancybox)

[Вадим Белкин]

Ссылку не сразу заметил. Я бы вам посоветовал по клику на .item добавлять ему класс, open например, который влияет на содержимое аналогично :hover. То есть к такому коду
.item-type-line .item-hover:hover { opacity: 1; }
добавить правила для .open

.item-type-line .item-hover:hove,
.item-type-line .item-hover.open { opacity: 1; }

и т.п. для остальных элементов.

[Вадим Белкин]

Заметил что вы используете бутстрап. Облегчил бы вам задачу тем, что посоветовал бы для элемента .item-hover добавить атрибут data-toggle="dropdown", который собственно сделает его кнопкой переключателем. При клике, будет добавляться класс open для .item-type-line и сниматься с остальных, но чтобы он по клику на кнопку в элементе не пропадал, добавьте скрипт

$(document).on('click.bs.dropdown.data-api', '.iframe.cboxElement', function (e) { e.stopPropagation() })

[sabanovvv]

Вадим Белкин: сделал по вашему и чето вроде некорректно отображаетеся на iOS,можете посмотреть,если вам не трудно uni.webj.esy.es