Как исправить :hover на мобильной версии сайта?

Question

[Евгений Морозов]

Доброе время суток) Появилась проблемка, могли бы мне помочь.
Есть блок, при наведении появляются ссылки для скачивания файла. Но в мобильной версии hover не пашет, при нажатии на блок нажимается и ссылка.

div class="box" >
			<p>Все</p>
			<div class="bgr"><img src="/img/icon/all.png" alt=""></div>
			<div class="btn">
				<ul>
					<a href="#" target="_blank">
						<li><ion-icon name="eye"></ion-icon><span>Просмотреть</span></li></a>
					<a href="#" download>
						<li><img src="/img/icon/pdf.png" alt=""><span>Скачать PDF</span></li></a>
					<a href="#" download>
						<li><img src="/img/icon/xls.png" alt=""><span>Скачать Excel</span></li></a>
				</ul>
			</div>
		</div>

Comments

[Brad9aga]

и где :hover, где мобильная версия, где сайт

[Сергей Горностаев]

Событие hover должно возникать когда палец завис над нужной точкой экрана?

[WapSter]

У мобильного нет события :hover делай элемент кликабельным через js для мобильных и показывай нужный элемент.

[Сергей Горностаев]

Евгений Морозов, перешёл. Всё ещё непонятно, как браузер в системе, в которой вообще нет курсора, может определять вхождение курсора в область?

Answer 1

[Lord_Dantes]

Как исправить :hover на мобильной версии сайта?

@media screen and (max-width: 767px){
.element:hover{
стили
}
}

Comments

[Brad9aga]

угадй мелодию, рандом решил выдать

[Lord_Dantes]

Brad9aga, всм?

[Brad9aga]

slave bb, исправил

[Lord_Dantes]

Brad9aga, что так ошибка что так я вас не понимаю

[Brad9aga]

slave bb, ты выдаешь рандомный ответ не видя, ни сайта, ни стилей

[Евгений Морозов]

slave bb, hover и так применяется без медиа.

[Lord_Dantes]

Евгений Морозов, ну так измените его в медиа запросах ало что не так?

[Lord_Dantes]

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

[Евгений Морозов]

slave bb , кто еще и тупит)))
Есть блок, в основе у него уже стоят hover эффекты, но на мобильной версии hover не работают.
Если я буду еще применять hover в media, то они тупо будут задваиваться.
Проблема в том, что при нажатии на блок сразу же нажимается ссылка, хотя ее еще не видно.

[Lord_Dantes]

Евгений Морозов, ну так вы видели свою разметку? Сделайте ссылку нормального размера типо display: block и чтобы оно не выходило с li, оно не пашет потому-что вы снизу тыкаете и попадаете в ссылку + в разметке дело крч

[Евгений Морозов]

slave bb, Увидел ошибку, спасибо))))

[FeST1VaL]

Евгений Морозов, В дополнение к предыдущему, чтоб у вас еще раз не подгорело появился вопрос, в iOS (Safari) нету свойства hover, точнее он работает не так как вы ожидаете.

[Cheizer]

Можно не париться и на мобильной версии не прятать за HOVER ссылки для скачивания а показать сразу. Или убирайте переход по клику на блоке, а по нему показывайте ссылки для скачивания и ссылку для перехода.