hover pseudoclass for the iPhone

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:

This entry was posted in Best Practices, CSS (including hacks), HTML, IE7, iPhone, JavaScript, Web Development. Bookmark the permalink.

8 Responses to hover pseudoclass for the iPhone

  1. Craig says:

    Awesome!! Touchstart works perfectly but I think my layout is getting in the way of touchend, sort of. Great job!

  2. Pingback: Prepara tu sitio para iPhone | Ayuda WordPress

  3. Pingback: 10æ¡å°ä»£ç å¼€å‘iPhone友好的网站 | Mr.Yunk

  4. Pingback: iphoneやiPadに対応したWEBサイトを作るスニペット11選 | KRUZ-GRAPHIX

  5. Pingback: iphone/ipad网站开发技巧

  6. Gerry says:

    I found this caused some problems, but it was the need for double quotes around touchstart and touchend.

  7. Felix says:

    This may be because this post is from 2008, but the :hover CSS pseudo-class works just fine on my iPod touch (iOS 3.1.2). The properties defined there are applied when touching the item.

  8. Damian says:

    I don’t understand: What do I enter where it says, “/* whatever your hover effect is */”

    Please note that I’m a newbie when it comes to CSS.

    Thanks in advance for your help!

Leave a Reply

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