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.
Sitepoint's web devlopment books have helped me out on many occasions both for finding a quick solution to a problem but also to level out my knowlegde in weaker areas (JavaScript, I'm looking at you!). I am recommending the following titles from my bookshelf:
I started freelancing by diving in head first and getting on with it. Many years and a lot of experience later I was still able to take away some gems from this book, and there are plenty I wish I had thought of beforehand. If you are new to freelancing and have a lot of questions (or maybe don't know what questions to ask!) do yourself a favor and at least check out the sample chapters.
The author line-up for this book says it all. 7 excellent developers show you how to get your JavaScript coding up to speed with 7 chapters of great theory, code and examples. Metaprogramming with JavaScript (chapter 5 from Dan Webb) really helped me iron out some things I was missing about JavaScript. That said each chapter really helped me to develop my JavaScript skills beyond simple Ajax calls and html insertion with libs like JQuery.
Like the other books listed here, this provides a great reference for the PHP developer looking to have the right answers from the right people at their fingertips. I tend to pull this off the shelf when I need to delve into new territory and usually find a workable solution to keep development moving. This only needs to happen once and you recoup the price of the book in time saved from having to develop the solution or find the right pattern for getting the job done..
Comments and Feedback
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.