QTT: CSS :hover Anchors

An attempt to not only post more but get back into posting code and design related articles, I’m labeling every Tuesday as Quick Tip Tuesday. I’ll post quick and easy tips on a wide range of topics including html, css, jquery, php, iphone dev, os x, wordpress, and kaizen cms. More code and design related posts will come along with the launch of a new site which I’ll be posting about soon.

:hover Anchors

Awhile back I started adding a little more to my anchors on some sites. I first saw this on Matt Brett’s site awhile back and have loved it since. I’ve gotten a few emails asking details on these links and they are actually pretty simple. This is basically a 3 state anchor. You can see this in action right here on PKR. Hovering over a post will cause the links in that article to stand out. Then hovering on the link itself causes a different style. Here is what the basic code looks like:

1
2
3
4
5
6
7
8
9
10
11
12
13

.content a:link, .content a:active, .content a:visited {
	color: #888;
}
 
.content:hover a:link, .content:hover a:active, .content:hover a:visited {
	color: #888;
	border-bottom: 1px dashed #888;
}
 
.content:hover a:hover {
	color: #333;
	border-bottom: 1px solid #333;
}

Thats it, nothing else to it. The first set styles the links as your normally would. This shows when you are not hovering on the .content section. The second set styles the links when you hover on the .content section. Finally you style the link when you hover on it. I’ve setup a quick demo of this which you can check out. This demo styles the anchors on whether your hover on .content, the sidebar or the footer. If using for a blog I would normally change .content to .post (or article if your using html5). This would cause the links to change when you hover on that article and not all.

This is just a quick look at what you can do with :hover. Just think of the possibilities. A quick reminder though that this method will not work correctly on IE6. It works perfectly on IE7 and IE8 though (as you can see if you view the demo in those browsers). You can style the links as you normally would for IE6 to fall back to. So, the links would be styled, they just won’t change on .content:hover.