JSFiddle - React, Tailwind, and code Playground

HTML

<div class="outer outer1">
    <a href="http:/www.somepage.com" target="_blank"><span>Clicking me on an iOS device requires <strong>two clicks</strong> to open url</span></a>
<div class="inner">This will show on :hover (but will also show when the link above is click once on iOS device).</div>
</div>
<div class="outer outer2">
    <a href="http:/www.somepage.com" target="_blank"><span>Clicking me on an iOS device requires <strong>one click</strong> to open url</span></a>
<div class="inner">Background red on :hover (but not when the above link is clicked on iOS device, since it is only some properties like display:none; that triggers the two-click behaviour).</div>
</div>

CSS

.outer1 .inner { display: none; background: gray; }
.outer {
    background: #ccc;
    height: 150px;
    width: 50%;
    margin-bottom: 5px;
}
.outer1:hover .inner { display: block; }
.outer2:hover .inner { background: red; }
strong { font-weight: bold; }