Enabling CSS Hover Selector on Touch Enabled Devices

Most web developers and designer make use of this common CSS selector to help make pages easier to consume by hiding things in the UI like buttons until the context of the application makes sense to show them.  I use this a little to hide things like buttons until such time that it makes sense to show them based on what the user is viewing or doing.  This can help in many ways not least helping to keep the UI simple and uncluttered.

There are lots of solutions out there that whilst they work are in the most part overkill.  The following code snippet will enable the :hover selector on all child elements:

$('body').bind('touchstart', function () { });

So given this HTML:

    <div id="content">
        <div id="nav"></div>
        <div id="content-wrapper"></div>

You might want to limit the scope to target just the actual page content, so you would use:

$('#content-wrapper').bind('touchstart', function () { });

The trick to getting this to work nicely in all instances is by being mindfull of the scope of the main selector. You might want to make sure the scope of the selector excludes any navigation menus and as I saw some odd behaviour in the Dolphin browser on iOS 8. This has been tested on FireFox, Chrome, IE, Dolphin, Opera and Safari on iOS 8.

Leave a Reply

Your email address will not be published.


This site uses Akismet to reduce spam. Learn how your comment data is processed.