Сохранять эффект зависания на сенсорном экране

Question

Я работаю над сайтом, содержащим канал изображений с использованием Instsfeed.js. Вытягивание изображений, симпатий, комментариев и все работает отлично.

Я сделал парения эффект, который перекрывает количество подобных и комментарии на картинке, как так: https://jsfiddle.net/9w1neq9m/3/

#instafeed { 
 
    margin-top: 30px; 
 
    text-align: center; 
 
    font-family: 'brandon-grotesque', sans-serif; 
 
} 
 
.insta-post { 
 
    display: inline-block; 
 
    margin: 0 10px 20px 10px; 
 
    position: relative; 
 
} 
 
.insta-hover { 
 
    position: absolute; 
 
    height: 100%; 
 
    display: flex; 
 
    justify-content: center; 
 
    align-items: center; 
 
    flex-direction: column; 
 
    background: rgba(0, 0, 0, .5); 
 
    color: white; 
 
    opacity: 0; 
 
    transition: opacity 1s; 
 
    -webkit-transition: opacity 1s; 
 
    padding: 0 15px; 
 
} 
 
.insta-hover .fa:last-of-type { 
 
    padding-left: 15px 
 
} 
 
.insta-post:hover .insta-hover { 
 
    opacity: 1; 
 
    transition: opacity 1s; 
 
    -webkit-transition: opacity 1s; 
 
}

<div id="instafeed"> 
 
    <div class="insta-post"> 
 
    <a href="#" target="_blank"> 
 
     <div class="insta-hover"> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut quam libero, blandit at odio et, fermentum luctus massa. Sed et tortor volutpat, semper orci sit amet, venenatis metus. Nullam scelerisque sem at risus maximus sodales.</p> 
 
     <p><i class="fa fa-heart" aria-hidden="true"></i> 130 <i class="fa fa-comment" aria-hidden="true"></i> 29</p> 
 
     </div> 
 
     <img src="https://unsplash.it/300/300" alt="Image from Instagram"> 
 
    </a> 
 
    </div> 
 

 
    <div class="insta-post"> 
 
    <a href="#" target="_blank"> 
 
     <div class="insta-hover"> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut quam libero, blandit at odio et, fermentum luctus massa. Sed et tortor volutpat, semper orci sit amet, venenatis metus. Nullam scelerisque sem at risus maximus sodales.</p> 
 
     <p><i class="fa fa-heart" aria-hidden="true"></i> 130 <i class="fa fa-comment" aria-hidden="true"></i> 29</p> 
 
     </div> 
 
     <img src="https://unsplash.it/300/300" alt="Image from Instagram"> 
 
    </a> 
 
    </div> 
 
</div>

Очевидно, что это не работает на мобильных устройствах. Кран идет прямо к ссылке (как и следовало ожидать ...), но на самом деле это не то, что я собираюсь сделать.

Я хочу, чтобы в первом касании активировался эффект наведения, а затем, если пользователь снова набрал, ссылка на фактическую работу.

Я нашел это http://www.hnldesign.nl/work/code/mouseover-hover-on-touch-devices-using-jquery/, который, кажется, делает именно то, что я хочу - я просто не могу заставить его работать. Весь скрыть/показать парения вещь сталкивает меня ..

Answer 1

Здесь вы идете:

JQuery:

$('.insta-post').on("touchstart", function(e) { 
    "use strict"; //satisfy the code inspectors 
    var link = $(this); //preselect the link 
    if (link.hasClass('hasHover')) { 
    return true; 
    } else { 
    link.addClass("hasHover"); 
    $('.insta-post').not(this).removeClass("hasHover"); 
    e.preventDefault(); 
    return false; //extra, and to make sure the function has consistent return points 
    } 
}); 

CSS:

.insta-post:hover .insta-hover, 
.insta-post.hasHover .insta-hover { 
    opacity: 1; 
    transition: opacity 1s; 
    -webkit-transition: opacity 1s; 
} 

JSFiddle Изменено

Посетите его с помощью сенсорного устройства или с помощью инструментов отладки, таких как веб-инспектор Chrome, который может имитировать сенсорный интерфейс.

PS: спасибо за обмен такой полезной ссылке, как я действительно нужен этот вид плагина.