Published in Widgets that Work on Monday, November 14th, 2005
Via Simon Willison I came across Bill Scott's Musings on Mouse Hover. In his article, Bill classifies some of the uses for mouse hover, and this reminded me of a certain widget that works.
Cameron Adams wrote about this already, but I wanted to include this here.
Pingomatic uses a hover behaviour, a hover invitation, that works very well to not only invite people to click on something but to educate them that something is indeed clickable.
What I am talking about is using hover on a label: label:hover
Many people are not aware that labels are clickable, and that may be due to the fact that not everybody uses the label tag when building forms, so the behaviour can be inconsistent. By using label:hover, a person will learn that it is clickable, and your form will become that much easier for that person to use.
Notice that there are two ways to code this, with two different effects:
As expected, this doesn't work in Internet Explorer. Well, until they release something that supports this behaviour, this type of mouse hover could be considered enhancement for people who use better browsers, or you can use whatever:hover by Peter Nederlof to help out your users. Also check out the comments on Cameron's original article on the topic.
I know this isn't an earth shattering widget that works, but I still come across enough forms out there where label isn't even used, let alone enhanced, so I figure it was worth having on the list.
Wow, this is such an elegant and seemingly obvious thing to do, I wonder why I never thought of it. Seems like it should be a browser default.
Wow, a voice from 5411 past!
Hey Jennifer, yeah, I feel the same way. It seem so obvious, and when done well (unlike my comment form at the moment) it has a nice feel.
Hey, glad you remembered me. :)
It would be kind of nice to restrict the hover just to checkbox and radio button labels (since it doesn't seem quite as useful for other labels), but I'm not sure if you could do this without using a class.
Of course, you were one of the sites' first visitors!
Great tip. It is amazing how something so simple can make such a big difference. I'm going to have use this method on some of my future projects.
Thanks for the tip!
The lack of a hover behavior in IE is hideous. Upon first notice of this, they should have released at least a beta version supporting element hovers, dontcha think?
If I were in charge, that type of thing would NEVER slip through the cracks. But then again, I'm an aesthetics guy.
I've been using this same general trick for labels and other elements that many people are unaware are clickable for some time. The simplest application of this technique is to alter the mouse cursor so that labels behave the same as anchors (links). Alas, that IE doesn't support :hover on elements other than anchors, and you have to resort to Javascript/HTC to achieve this, is a real shame.
Comments and Feedback