How to fix a double tap :hover issue on on mobile (ios)? - html

Question

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.

Answer 1

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