1

I'm using hover (css) in an image with a link to show a text. It works perfectly in desktop and in android devices (if you click for a second in the image then you hover in mobile).

The problem is that I realized in iOs devices, when you hold the click for a second in a link, it opens a window with a few options: Open in a new tab, download link file, copy, share...

Is there any way to get the hover in mobile with iOs?

.links-home a:hover p,
.links-home:hover .not-exhibited {
    transition: opacity 0.5s;
    opacity: 1;
    text-align: center;
}
Vander
  • 79
  • 9
  • Mobile devices are not like computes. Indeed, on your computer, you can put your mouse above a button whereas on a phone, you don't have any mouse and cursor. At least, you can keep the `:hover` attribute on your links but it will be visible until the redirection. I suggest you to remove all `:hover` attributes when you're on a mobile device using `@media` queries – MrAnyx Jul 24 '20 at 08:51

1 Answers1

0

with a @media-Query try to replace the :hover with :focus.
I can't test this because i dont have an iOS device, but according to this post the item stays focused until another item is clicked and therefore a short tap is enough to show the extra text.
Maybe you have to put the images into an anchor (<a>) to get focus work properly.