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");
});
</script>

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

Glenn

A highly experienced WordPress Web Developer, Front-end and 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.

Comments 22

    1. Post
      Author
  1. 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.

    1. Post
      Author

      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.

  2. 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.

  3. Post
    Author
  4. didn’t work for me but this line work fine :
    [code]document.addEventListener("touchstart", function() {},false);[/code]

  5. 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?

    Thanks

    1. Post
      Author

      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).

        1. Post
          Author

Leave a Reply

Your email address will not be published. Required fields are marked *


*