2

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.

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.

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>

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.

dillonbrannick
  • 322
  • 1
  • 5
  • 16
  • 1
    Possible duplicate of [:hover on ios mobile devices turns into double-touch instead of hover](https://stackoverflow.com/questions/32371431/hover-on-ios-mobile-devices-turns-into-double-touch-instead-of-hover) – saurabh Apr 17 '19 at 16:22
  • @saurabh yep you're right tested it and with just one hover it worked as I wanted. However, removing the elements makes the desktop experience not as good. Andy's answer seems to solve that so I only have to remove elements from devices that lack good hover capabilities with media queries. – dillonbrannick Apr 17 '19 at 16:44
  • @saurabh Added that information to the question, thanks! – dillonbrannick Apr 17 '19 at 16:52

1 Answers1

3

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%);
  }
}

Demo

.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

Andy Hoffman
  • 18,436
  • 4
  • 42
  • 61