Fix iPad iPhone CSS Hover Issues

Glenn Glenn's Blog 22 Comments

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.

  • josh w

    This worked like a charm! Thanks!

    • Our pleasure.

      Best Regards

  • Thanks! So simple and solved a problem I’ve spent hours over!

  • bird

    Great piece of code!

    I’m using this for a popup div providing some options and it works fine. Nevertheless the div can’t be closed after the click event.

    I use .myclass:hover .myoptiondiv on other devices instead.

  • Thank you!
    It’s work great.

  • I was showing a div on mouse over this method worked for showing the div, but how do we hide that again?

  • vardhaman

    mouse hover menu is not working in ipad? what is solution for that

    • That’s a different issue vardhaman and would relate to how the hover on the menu is triggered. A decent menu will have a mobile view at a specific width. If the author of the menu can’t help you and if you are using WordPress I suggest you try UberMenu. This is the best WordPress Menu Plugin out there currently.

  • vardhaman

    link hover menu should display and mouse leave menu should disappear on i pad

  • kevin

    Thanks for this. I was hoping to find a pure css solution but this seems to get the job done. Stupid iPad.

  • Great tip, it was so helpful, thanks !

  • Hi thank you very much for the tip. I am not sure if it really works for me, I haeve a joomla website.

    I wrote this in my index.php:

    jQuery(document).ready( function($) {

    jQuery(‘.moduletablemenu’).attr(“onclick”,”return true”);


    and here you can see how it looks like in firebug:

    but wenn you test it on an iphone it does not work. It seems there is no deeper menu points.

    looking very much forward for your help.

  • Have you tried apply the click event to the link directly :-

    onClick="return true"
  • Bhanu

    Simplest solution to this problem. Thanks

  • Tobias

    I have this issue with a joomla web, please tell me where I should put the onClick=”return true”

  • Awesome! I was thinking of adding a whole separate load of buttons just for i pads. Has saved me a lot of time. Cheers.

  • reda

    didn’t work for me but this line work fine :

    document.addEventListener("touchstart", function() {},false);
  • ofuv

    it works fine. it shows my dropdown menu. cheers!

    but I have question. it is possible when i click again my menu button. the dropdown menu will hide or turn off again?


    • This really is down to your menu. If you substitute your menu for UberMenu (assuming you are on WordPress) then you can add responsive close toggles that would allow users to close dropdown and resolve this issue. If you are not on WordPress then look for a menu with this feature or at least one that closes a menu when you click off the sub menu (on mouseleave).

      • ofuv

        Can you give me an example for a not WordPress user. Thanks