html - 如何修复双击 :hover issue on on mobile (ios)?

Question

我有一个图像链接，它具有 :hover 功能，可在鼠标悬停时在图像顶部显示文本，然后单击即可转到新网页。

但是在移动设备上(仅在 safari 移动设备上进行过测试)，轻按一下会显示悬停功能，然后再轻按一下即可转到该页面。我不想要这个，我可以看到这对下拉菜单有益，但对于我的用例来说，它只会让用户界面更加困惑。

我希望它一键直接转到页面，这就是使用 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(在评论中):这个问题似乎是一个 ios 问题，与无法处理 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>

Support