如何解决在手机(ios)上双击:hover的问题? [英] How to fix a double tap :hover issue on on mobile (ios)?

问题描述

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

I have an image link that has a :hover functionality to show text on top of the image on rollover and then on click you are taken to the new web page.

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

However on mobile (only been tested on safari mobile), one tap shows the hover functionality and then the second tap takes you to the page. I don't want this, I could see that being beneficial for a drop down menu, but for my use case it just makes the ui more confusing.

我希望它一键直接进入页面，这是使用 a:hover 的普通链接会发生的情况.

I want it to go straight to the page on one tap, which is what happens with normal links with a:hover.

这是我的代码:

Here's my code:

.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条目(如桌面罐头)有关.

Via saurabh (in the comments): The issue seems to be an ios issue to do with an inability to deal with the muiltiple :hover entries like desktop can.

推荐答案

您可能需要考虑

You might want to consider the Level 4 Media Query spec which allows for direct targeting of devices which support 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>

支持

这篇关于如何解决在手机(ios)上双击:hover的问题?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！