Как исправить двойное нажатие: проблема с зависанием на мобильном телефоне (IOS)?

Question

У меня есть ссылка на изображение с функцией :hover, позволяющая показывать текст поверх изображения при наведении курсора, а затем по щелчку мыши вы переходите на новую веб-страницу.

Однако на мобильном устройстве (было протестировано только на Safari Mobile) одно касание отображает функцию наведения, а затем второе нажатие переносит вас на страницу.Я не хочу этого, я вижу, что это полезно для выпадающего меню, но для моего варианта использования это только делает пользовательский интерфейс более запутанным.

Я хочу, чтобы он сразу переходил на страницу одним нажатием, что происходит с обычными ссылками с a:hover.

Вот мой код:

.thumb_text {
  position: absolute;
  top: 0;
  left: 2.531645569620253%;
  width: 73.83966244725738%;
  padding-top: 12px;
  z-index: 1;
  color: white;
}

.the_line_thumb {
  position: relative;
  overflow: hidden;
}

.the_line_thumb img {
  height: 200px;
  width: 500px;
  background-color: yellow;
}

.the_line_thumb_text {
  display: none;
}

.the_line_thumb:hover img {
  filter: brightness(40%);
}

.the_line_thumb:hover .the_line_thumb_text {
  display: block;
}

<a href="https://example.com">
  <div class="the_line_thumb">
    <img src="example.png">
    <div class="the_line_thumb_text thumb_text">
      <h1>Hello Stack Overflow</h1>
      <p>
        Hope you're having a great day and thanks for trying to help me out.
      </p>
    </div>
  </div>
</a>

С помощью saurabh (в комментариях): проблема, по-видимому, связана с неспособностью справиться с muiltiple: элементы hover, такие как десктоп, могут.

Answer 1

Возможно, вы захотите рассмотреть спецификацию Level 4 Media Query , которая позволяет напрямую настраивать устройства, поддерживающие hover.

.

@media(hover: hover) and (pointer: fine) {
  .the_line_thumb:hover img {
    filter: brightness(40%);
  }
}

Демо

.thumb_text {
  position: absolute;
  top: 0;
  left: 2.531645569620253%;
  width: 73.83966244725738%;
  padding-top: 12px;
  z-index: 1;
  color: white;
}

.the_line_thumb {
  position: relative;
  overflow: hidden;
}

.the_line_thumb img {
  height: 200px;
  width: 500px;
  background-color: yellow;
}

.the_line_thumb_text {
  display: none;
}

.the_line_thumb:hover .the_line_thumb_text {
  display: block;
}

.the_line_thumb:hover .plus {
  color: #ffbdff;
  background-color: white;
}

@media(hover: hover) and (pointer: fine) {
  .the_line_thumb:hover img {
    filter: brightness(40%);
  }
}

<a href="https://example.com">
  <div class="the_line_thumb">
    <img src="example.png">
    <div class="the_line_thumb_text thumb_text">
      <h1>Hello Stack Overflow</h1>
      <p>
        Hope you're having a great day and thanks for trying to help me out.
      </p>
    </div>
  </div>
</a>

Поддержка