We use cookies on this site to remember: your settings, your history, whether you are logged in and to give you a better experience.
More info about cookies
Accept Cookies
Opt Out
You have an excellent choice of browser. Why not add our quick launch app so you can easily manage your shop in the future.Get our free app from the Google Chrome Store.
Login       Register

The CSS :focus mouse over declaration.

This article is intended to help other web developers wanting to find out about the CSS :focus rule.

Anyone that has done some kind of web development will have seen this kind of code before:

a:hover { color: red; text-decoration: none; }

And you may be asking me what is wrong with that?

Well it does work, but what about people that navigate around the site using the Tab key? Or even devices that don't have a mouse so there is no hover event?

Im on a solo quest to try and get all web developers to make a simple addition to that code that will give a far better user experience for unusual web devices and web behaviours.

There is no reason why all your hover events shouldn't always look like this:

a:hover,a:focus { color: red; text-decoration: none; }

This means that if a link is given focus it will look like it does when mouse is hovering over it.

Give it a try and hit tab a couple of times to see it working on this site.

This will give your whole site a more standard feel when customers are using touch screen devices.

Browser support for :focus is good but not perfect. It seems to work on all browsers apart from IE 7 and under. This is good enough for me because it is never going to be an integral part of your site.

This code also works for text areas so you can display different styles when the user is typing into a text box.

Be groovy and share us around:
You might be interested in:
You can also find us on: