javascript - Forcing mobile devices to activate :hover CSS properties on first touch and activate link on second touch -
: ) so, i'm trying solve hover effect issue. have tooltips on of links. code looks this: <a href="https://wikipedia.org/wiki/space_shuttle_atlantis"> <h6 class="has-tip">space shuttle <p class="tip">the space shuttle invented santa claus</p> </h6> </a> and css bit more involved: .tip { display: block; position: absolute; bottom: 100%; left: 0; width: 100%; pointer-events: none; padding: 20px; margin-bottom: 15px; color: #fff; opacity: 0; background: rgba(255,255,255,.8); color: coal; font-family: 'ubuntu light'; font-size: 1em; font-weight: normal; text-align: left; text-shadow: none; border-radius: .2em; transform: translatey(10px); transition: .25s ease-out; box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28); } .tip::before { content: " "; display: block; position: absolute; bottom: -20px; left: 0; height: 20px; width: 100%; } ...