CSS, JavaScript and XHTML Explained

hover pseudoclass for the iPhone December 28, 2008

Since you’re not hovering, there is no hover pseudo class on the iPhone. instead they have touch events. To simulate the :hover pseudo class, include javascript similar to this:

var myLinks = document.getElementsByTagName('a');
for(var i = 0; i < myLinks.length; i++){
   myLinks[i].addEventListener('touchstart', function(){this.className = "hover";}, false);
   myLinks[i].addEventListener('touchend', function(){this.className = "";}, false);
}

and in your CSS add something similar to:

a:hover, a.hover { /* whatever your hover effect is */ }

Notes:

• onTouchStart is similar to onMouseOver and onTouchEnd is similar to onMouseOut
• You’ll likely want something more complex than simply removing the class on touch end. This is just a very simple example that will replace all classes on all your links with a "hover" class, which is probably not what you want. But you get the idea.
• You can use this on all elements, not just links.

-Estelle Weyl

Note:

• See also Web Development for the iPhone. This is an update to that post.