How do I hover on the iPad?

Is there a way to hover over content in a web page when viewing it in Safari in the iPad? Specifically, I was trying to hover over the individual avatars at Ask Different iPad Contest home page. On a Mac or PC, it shows when the individual completed their level on hovering, but I couldn't get to see that in the iPad.

Solution 1:

If only master yoda had an account here, he might say "tap or tap not, only jedi can hover" since the implementation details quickly delve into where web technology meets human interaction design.

Going down that rabbit hole a bit, ^{he might also point that good web developers know about the TouchEvent class in Safari that can discern a touchstart multitouch event from a touchend/touchcancel/touchmove interaction and perhaps be used to provide additional feedback based on the idea that touching a target would have a visible effect on the web page's contents.}

It's generally bad design to expect touch to mirror a mouse centric model, but that doesn't mean this particular site's design is wrong. Just think hard before assuming there's a simple way to design for touch than depends on simulated mouseover events.

Solution 2:

A (very) brief tap on an image that has a link with a:hover property activates that a:hover experience. A longer tap follows the <a> link. Unfortunately, this behaviour is not seen with the <acronym> tag, which in desktop browsers act similar to :hover. Here is a less-than-perfect example, tested on iPhone.

Solution 3:

No, there’s no way of doing that on a touch device. There’s no way for your iPad to detect your finger is hovering over the its screen :) (Although technically this is perfectly possible, and it could in theory be added to a future iPad model.)

You could use JavaScript to show the title attribute values of the image links on http://thenewipadishere.com/ though:

[].forEach.call(document.images, function(element) {
  var span = document.createElement('span');
  span.innerText = element.title;
  element.parentNode.insertBefore(span, element);
});

In bookmarklet form:

javascript:[].forEach.call(document.images,function(b){var a=document.createElement("span");a.innerText=b.title;b.parentNode.insertBefore(a,b)});

Copy and paste that and add it as a bookmark on your iOS device of choice. Then, visit http://thenewipadishere.com/ and select the bookmark.

Solution 4:

Try Puffin web browser for the iPad. The cursor in the trackpad mode can hover. Also, you can watch flash video, and it's slow, but at least it's possible.