html - 悬停状态不适用于移动设备

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;
}