Question

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

但是，在移动设备上（仅在safari移动设备上经过了测试），一键显示鼠标悬停功能，然后第二键将您带到页面。我不希望这样，我可以看到这对于下拉菜单很有用，但是对于我的用例来说，这只会使ui更加混乱。

我希望它一键直接进入页面，这是与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问题，与无法处理多个：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

如何解决在手机（ios）上双击：hover问题？

1 个答案: