タップでモバイルでホバー状態が動作しない

Question

モバイルでボックスをタップすると、ホバー状態をどのように機能させるかを判断しようとしています。モバイルで:hoverを使用できないことはわかっています。私も:activeを使ってみましたが、まだそれは動作しません。

「現在開発中のプロジェクト」のセクションhereで問題を確認できます。モバイルデバイスでテストする必要があります。ここで

は私が箱のために使用しています現在のコードです：

HTML

<section id="portfolio-soon" class="bg-light-gray"> 
    <div class="container"> 
     <div class="row"> 
      <div class="col-lg-12 text-center"> 
       <h2 class="section-heading">Projects currently under development</h2> 
       <h3 class="section-subheading text-muted">These projects are currently being designed and developed.</h3> 
      </div> 
     </div> 
     <div class="row"> 
      <div class="col-md-3 col-sm-6 portfolio-item"> 
       <div class="portfolio-link" > 
        <div class="portfolio-hover orange-boxfit"> 
         <div class="portfolio-hover-content"> 
          Coming Soon 
         </div> 
        </div> 
        <img src="img/portfolio/boxfit.png" class="img-responsive" alt=""> 
       </div> 

       <div class="portfolio-caption"> 
        <h4>BoxFit</h4> 
        <p class="text-muted">Web Design, Development &amp; Web Hosting</p> 
       </div> 
      </div> 
     </div> 
    </div> 
</section> 

CSS

#portfolio-soon .portfolio-item .portfolio-link .portfolio-hover { 
    background: rgba(124,44,227, 0.9); 
    position: absolute; 
    width: 100%; 
    height: 100%; 
    opacity: 0; 
} 

#portfolio-soon .portfolio-item .portfolio-link .portfolio-hover:hover { 
    opacity: 1; 
} 

Answer 1

@NohmanJ：私が追加しようとしています。アクティブ状態とそれはうまく動作します。オーバーレイを表示するには、モバイルで項目をクリックする必要があります。下のコードと同じコードを使用しましたか？ hoverと：activeの両方で同じスタイルを設定するのが一般的なアプローチなので、モバイルでコードをアーカイブする場合。

#portfolio-soon .portfolio-item .portfolio-link .portfolio-hover:hover, #portfolio-soon .portfolio-item .portfolio-link .portfolio-hover:active { 
    opacity: 1; 
}