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

悬停状态不在移动设备上工作

1 个答案: