Overlay CSS via visibility - links in the overlay that cannot be clicked on mobile devices
Pay attention to the following codepen .
For desktop users, the example works as expected. If the image is frozen, an overlay is displayed and you can click the link.
But on mobile, I have some problems with this solution. I want a click on the image to show the overlay. Then the second link should target the external page. This works fine as long as one click is on the bottom of the image, but it stops working when you click on the top of the image (in the area where the link is in the overlay).
If I understand this correctly, this is because the overlay is displayed instantly, which means the link is also visible and clicked instantly. So the question is how to get the example to show the overlay first and THEN to activate the link.
Side note: I cannot use the solutions where the overlay is displayed through display: none
and display: block
because in my real case the overlay determines the size of the full margin, but that is not important for this example and things will be more complicated.
Thanks in advance for your efforts.
source to share
This snippet includes hover effects for touch screens
document.addEventListener("touchstart", function() {}, true);
and add aria-haspopup="true"
andonclick=""
<div class="overlay" aria-haspopup="true" onclick="">
<a href="https://google.com" target="_blank">Testlink to Google</a>
</div>
and this css &:focus .overlay
&:hover .overlay, &::focus .overlay, &:active .overlay {
visibility: visible;
}
source to share