CODEWITHSUNDEEP
javascriptjqueryhtmlcsshover
Androbaut
Androbaut

Reputation: 409

Fixing hover behavior on iOS

I've got three circular images that display information when you hover over them. Chrome & Safari both work fine, and on my android 4.4 device tapping the image reveals contact info, which is cleared by tapping anywhere outside of it.

However, on iOS 10.1.1, 'tapping' the image doesn't produce the desired effect, while 'tapping' the area where a hidden link is superimposed over the image does work. This isn't desirable since the info can't be cleared by tapping elsewhere.

Link to Codepen Example

HTML

<ul class="ch-grid">
<li>
<div class="ch-item ch-img-1">
  <div class="ch-info">
    <h3>Use what you have</h3>
    <p>by Angela Duncan <a href="http://drbl.in/eOPF">View on      Dribbble</a>
    </p>
   </div>
 </div>
</li>
<li>
<div class="ch-item ch-img-2">
  <div class="ch-info">
    <h3>Common Causes of Stains</h3>
    <p>by Antonio F. Mondragon <a href="http://drbl.in/eKMi">View on Dribbble</a></p>
  </div>
</div>
</li>
<li>
<div class="ch-item ch-img-3">
  <div class="ch-info">
    <h3>Pink Lightning</h3>
    <p>by Charlie Wagers <a href="http://drbl.in/ekhp">View on Dribbble</a></p>
  </div>
</div>

How can I get mobile Safari to handle :hover events like the android version of Chrome?

Any advice is welcome, looking forward to figuring this out!

Upvotes: 0

Views: 66

Answers (1)

Guy
Guy

Reputation: 535

I have faced this issue recently and managed to solve it by adding ontouchstart="" to the body tag, like this:

 <body ontouchstart="">

Upvotes: 1

Related Questions