Question

我在网站上具有悬停效果，可以旋转框并显示内容。但是，在无法悬停的触摸设备上，我想用触摸代替悬停。

因此在触摸设备上，在第一次点击时，将应用悬停效果，并且在第二次点击链接上将被激活。

我已经尝试使用CSS唯一方法实现此目标 (@media (hover: none) and (pointer: coarse))，但没有运气。

我还尝试在jquery中处理touchstart事件，但由于我是javascript的初学者，因此未成功。

这是我的HTML：

<div class="item photo">
    <div class="content">
        <div class="flip-box taphover">
            <a href="%PERMALINK%" class="permalink">
                <div class="flip-box-inner">
                    <div class="flip-box-front">
                        %POST_THUMBNAIL|400x400%
                    </div>
                    <div class="flip-box-back">
                        <h2>%TITLE%<br>
                            <span>%ACF|podnadpis-1%<br>
                            <span>%ACF|datum_zahajeni% - 
                            %ACF|datum_ukonceni%</span></span>
                        </h2> 
                    </div>
                </div>
            </a>
        </div>
    </div>
</div>

这是我的CSS：

/* This container is needed to position the front and back side */
.flip-box-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;

}

/* Do an horizontal flip when you move the mouse over the flip box container */
.flip-box:hover .flip-box-inner {
  transform: rotateY(180deg);
}



/* Style the front side (fallback if image is missing) */
.flip-box-front {
  position: relative;
  backface-visibility: hidden;
}

.flip-box-back {
      position: absolute;
      top: 0; left: 0;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  transform: rotateY(180deg);
  background-color: #fff;
}

任何人都可以提供一些指导，以实现修改我的代码的预期行为吗？

悬停在触摸设备上

0 个答案: