malikovdmitry
@malikovdmitry
Фотограф, начинающий веб

Как победить :hover на iOS?

Добрый день!
Суть вопроса: на десктопе при наведении мышкой на пост появляется div с названием и описанием поста.

4d65f71b361e45e68cf39a6063704d38.jpg

На iOS :hover не отрабатывает вовсе. Посмотрев способы решении данной задачи остановился на том, чтобы навесить на div click вместо :hover'а. При click просто идет замена класса css.
Вот код:

HTML:
<div class="img_masorny">
	<div class="masorny-post-meta">
		<div class="masorny-post-meta-text">
			<a href="<?php the_permalink(); ?>"><?php the_title('<h2>', '</h2>'); ?></a>
			<?php the_excerpt(); ?>
		</div>
	</div><!--/post-meta-->
<a href="<?php the_permalink(); ?>"><img class="blog_img_masorny" src="<?php echo catch_that_image(); ?>" alt="" /></a>
</div>


JS:
<script type="text/javascript">
				$(function() {
					if (screen.width <= '1024') {
					    $(".img_masorny").click(function() {
				        $(this).find(".masorny-post-meta").toggleClass("masorny-post-meta-click");
				        $(this).find(".masorny-post-meta-text").toggleClass(".masorny-post-meta-text-click");
				    }); 
				    }
					})
			</script>


CSS:
.masorny-post-meta {
	position: absolute;
	width: 100%;
	height: 100%;
	padding:0 19px;
	font-size: 15px;
	overflow: hidden;
	background: rgba(0, 0, 0, 0.44);
	/* IE 8 */
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  /* IE 5-7 */
  filter: alpha(opacity=0);
  /* Netscape */
  -moz-opacity: 0;
  /* Safari 1.x */
  -khtml-opacity: 0;
	opacity: 0;
	-webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
}

.masorny-post-meta-text {
	position: relative;
	display: block;
	margin-top: -250px;
	
	-webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
}

.masorny-post-meta-click {
	opacity: 1;
}
.masorny-post-meta-text-click {
	margin: 0;
}


У меня этот способ работает но не совсем корректно. Вот что получается если тапнуть сначала на один пост, а затем на другой:
e01934d8b82645059e46cda9901e4a4e.jpg
Получается .masorny-post-meta-text отходит обратно, а .masorny-post-meta не уходит в opacity:0. И не знаю в чем дело.

Пожалуйста, помогите.
  • Вопрос задан
  • 3089 просмотров
Решения вопроса 1
@Haoss
html-верстальщик
у блока с ховером просто прописать onclick=""
Ответ написан
Пригласить эксперта
Ответы на вопрос 2
IonDen
@IonDen
JavaScript developer. IonDen.com
Это вообще тупо пытаться имитировать ховер эффект для тач устройства. Вы должны перепроектировать приложение и для мобильных устройств сразу(!) выводить описание. Ниже картинки например.
Ответ написан
Комментировать
Taraflex
@Taraflex
Ищу работу. Контакты в профиле.
Используйте :active для срабатывания на мобилках.
https://jsfiddle.net/QW01_01/3jqr1n40/
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы