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>

不活动时禁用覆盖链接（移动设备）

1 个答案: