Fix iPad iPhone CSS Hover Issues

You’ve probably found that when using CSS hover your iPhone / iPad will not translate these into a click event. In our recent experience with a client site when clicking the CSS3 hover we experienced a forced copy of the content of the div by our trusty iPad. To resolve CSS Hover issues on iPad / iPhone we can use the onclick return true event. Here’s how to apply it to your element:-

<script type="text/javascript">
jQuery(document).ready( function($) {
 jQuery('.your-class').attr("onclick","return true");

You will now find that your CSS hover event is a neat click on iPhone / iPad

Note if you want to add this straight to your div then just add it to your element like so:-

<div class="something" onClick="return true">
About the Author
Fix iPad iPhone CSS Hover Issues Fix iPad iPhone CSS Hover Issues 0da77002febbfe28d15144a57bbcc2c9 s 180 d mm r g


A highly experienced Web Designer / Web Developer (Webflow, WordPress, Weebly & Custom), Front-end / Back-end Developer & New Media Specialist, with extensive knowledge of a wide spectrum of technologies in the Development and Creative Industries, built up over a number of years.