Добрый день!
Суть вопроса: на десктопе при наведении мышкой на пост появляется div с названием и описанием поста.
На 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;
}
У меня этот способ работает но не совсем корректно. Вот что получается если тапнуть сначала на один пост, а затем на другой:
Получается .masorny-post-meta-text отходит обратно, а .masorny-post-meta не уходит в opacity:0. И не знаю в чем дело.
Пожалуйста, помогите.
