悬停状态在点击时无法在移动设备上运行

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：我尝试添加 :active 状态并且效果很好。用户需要点击移动设备中的项目才能看到叠加层。您是否使用了与以下相同的代码？ 因为为 :hover 和 :active 设置相同样式是一种流行的方法，如果您想在移动设备中存档您的代码。

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