Does tapping an tag with an iPad trigger CSS :focus status?

Question

I have a dropdown which uses CSS a#hoverlink:hover+div to make a div to appear, then you can click a link in the div.

On Android, when you click the hoverlink, it triggers :hover so this works fine.

I heard this isn't working in an iPad. How can I make it work? I'm thinking using :focus as an alternative to :hover would do the job. Will clicking trigger :focus in iPad safari?

I would just test it, but I don't have an iPad to try it with:

a#hoverlink+div { transition: all 2s; }
a#hoverlink:not(:focus)+div { visibility: hidden; opacity: 0; }

<a href="javascript:" id="hoverlink">the link</a><div> yes! focus worked, now wondering if click works<br/><a href="javascript:" onclick="alert('great, it worked!')">click here!</a></div>

Answer 1

You can try using :target. Below is a purely CSS example. You should be able to tweek it with Javascript to your needs.

Here is a reference for using :target https://css-tricks.com/on-target/

a#hoverlink+div { transition: all 2s; }
a#hoverlink:not(:target)+div { visibility: none; opacity: 0; }

<a href="#hoverlink" id="hoverlink">Show The Div</a>
<div>You should see this once the link is clicked</div>

Answer 2

Per the comments, it sounds like the :active idea doesn't work.

While IMI's :target technique would work, in my case it would conflict with JavaScript-driven use of the hash string for other purposes.

So my answer is just to use JavaScript onclick to add a class which will cause the dropdown to appear.