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.
I am on a panel at