Отключить оверлейные ссылки, когда они не активны (мобильное устройство)

Question

Прежде всего, пожалуйста, будьте снисходительны. Я очень схожу с CSS, но у меня есть кое-какая база.

Итак, моя проблема с версией этого мобильного устройства моего веб-сайта

Для рабочего стола, это не проблема, если изображение наведено, отображается оверлей, и вы можете нажать на ссылку.

Мобильные устройства, с другой стороны, более проблематичны. Что я хочу, так это то, что нажатие на изображение показывает наложение, а второе нажатие может нажать на ссылку. Это работало нормально, если вы не нажимаете на область ссылок.

Что я мог сделать?

Я пробовал события указателя, но я не могу заставить его работать.

Большое спасибо за вашу помощь!

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>