Interesting uses for :hover
Tags :
We all have to admit that CSS has some shortcomings. Thanks to the adoption of CSS3 and increasing standardization between browsers, this is getting better. During a recent course on responsive theming, I discovered a neat trick to trigger a click effect on elements in a mobile browser. It utilized the common css pseudo-class :hover, but when you add some CSS3 transitions it starts to get really interesting.
CSS Vocabulary
Before we get started, lets get some CSS terminology out of the way so we're all on the same page.
This is a great place to talk about the differences between pseudo-elements vs pseudo-classes. :hover is a pseudo class, so that may be all you hear today. For more detailed information, check out the official W3.org word on Pseudo-elements and pseudo classes. Or check out W3Schools for a list of all CSS pseudo classes / elements.
Responsive theming scenario
One thing that good trainings have in common are the occasional open-ended exercise that enable you to find your own solutions and collaborate with other students. Here's how it went down: the challenge was to make an existing page responsive. The author used thumbnail images in his post and we needed to make it look better on mobile.
One easy solution was to make thumbnails full width on mobile, but I really wanted to let the visitor click on a thumbnail to see a bigger version. It didn't make sense that the purpose of the thumbnail should be significantly changed just because it's on mobile; a thumbnail should still be a thumbnail. I knew that I should be able to accomplish that with a pseudo-class, but mobile browsers (and touch screens) are tricky.
I tried :focus first - thinking touching the image would move focus and trigger the declaration. Unfortunately, that didn't seem to do anything on a touch screen. Next I tried :hover - bingo! "Hover" technically doesn't exist on touch technology (yet), but pressing the image seems to trigger the declaration. To un-hover, simply click outside the image.
Demo time
What does that mean for you? Check out this demo to see what happens when a css3 transition is added. If you're checking it out on a mobile browser, here's the url: http://is.gd/hoverexample. If you're not in a mobile browser, feel free to drag the width of your browser window to about 300px and hover over one of the thumbnails. Feel free to grab the CSS to see how it's done.
Pretty cool, right? What else can you use this for?
I'm very interested in this technique as a possible substitute for a hover, for pages that may be viewed on iPad or mobile devices. The demo works partially but not fully on my iPod Touch: when I touch the image there is a transition, but when I touch again, either inside or outside the image, it does not revert to its original state. The only way I could get it to revert was by reloading the page. Not a big problem in this case, but that would be a deal-breaker for the use I have in mind.
You're absolutely correct. However there is another way to get the images to size down without having to do a reload of the page. On mobile safari if you click one image to make it grow, you can click on the other image to make it shrink. I suspect this is because it still thinks you're hovering over it until you actively "hover" over something else. This is aggravating, but still pretty useful.
To get a little more technical, iOS and Android Browser trigger more than just 'ontouchstart' when you tap on the image. They also trigger the 'mousemove' family ('onmousemove', 'onmouseover') events. This conveniently triggers :hover which allows your CSS trick to work. You have to tap away to 'move' the 'mouse' again and remove the :hover.
Nice hack!
Ah, that makes a lot of sense. Thanks Brian!