css - 不活动时禁用覆盖链接(移动设备)

Question

首先，请放纵一下。我对 CSS 非常菜鸟，但我有一些基础。

所以我的问题是我的 website 的这个移动设备版本

对于桌面，如果图像悬停并显示叠加层并且您可以单击链接，这不是问题。

另一方面，移动设备问题更多。我想要的是点击图像显示叠加层，第二次点击可以点击链接。只要您不点击链接区域，它就可以正常工作。

我能做什么？

我尝试了指针事件，但我似乎无法让它工作。

非常感谢您的帮助!

Answer 1

你必须用 javascript 来做到这一点(我在这里使用 jQuery):

$(document).ready(function () {
     /**
     * Detect if the device is a touch device (tablet, mobile, ...)
     *
     * @returns {boolean}
     */
    function isTouchDevice() {
        return 'ontouchstart' in document.documentElement;
    }
    
    // Get the previous element clicked (if there is multiple items with the same class
    let previousClick = null;
    $('.box').on('click', function (e) {
        if (isTouchDevice()) {
          e.preventDefault(); // Don't go to the link if it's a               touch device
          if (this === previousClick) {
            window.location.replace($(this).attr('href'));
          }
          previousClick = this;
          return false;
        }
    });
});

.box_container {
  margin: 20px;
}

.box {
  padding: 50px;
  background-color: #000;
}

.box p {
  display: none;
  color: #FFF;
}

.box:hover p {
  display: inline-block;
}

<div class="box_container">
    <a href="http://google.com" class="box">
      <p>My super Overlay</p>
    </a>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>