iPhone doesn’t support :hover? Or does it?
When reading up about developing websites for iPhone (and iPod Touch), everyone points out how Safari on this platform works pretty much like the desktop version except that the touch interface means some things, for example hover events, do not work. Okay, that makes sense to me.
However, whilst working on other code, I had noticed a few… anomalies! Check out this example page. There is a single CSS rule:
p:hover {
background-color: red;
}
This rule does get triggered on an iPhone if the element has a click event handler that returns true. This includes <a>nchor elements, which will work even with JavaScript disabled.
It’s a bit difficult to exploit this behaviour however. I did try to have the rule act like a toggle – enabling and disabling on successive clicks, but iPhone does not (as far as I can tell) support blur() or focus() functions.
What I’d be interested in knowing is if this functionality is by design, or if it is simply a feature of WebKit?
