タッチスクリーンにホバー効果を残す

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>

を。タップはリンクにまっすぐ行く（あなたが期待しているように..）が、それは本当に私が行っているものではありません。

まず、ホバー効果を有効にしてから、ユーザーが再びタップすると実際に動作するようにします。

私はこれを見つけました。これは私が欲しいものを正確にやっているようです - 私はそれを動作させることができません。全体の表示/非表示ホバー事は私をオフにスローされます。..

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：JSFiddle

更新

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

タッチデバイスを使用して、またはタッチをシミュレートできるChromeのウェブインスペクタなどのデバッグツールを使用してご覧ください。

PS：おかげで、私は本当にプラグインのこの種を必要とするような有用なリンクを共有するためのたくさん。