Kilian Valkhof

Context Hover, adding context & feedback to your links

Just the other day I was using Opera mini and noticed it had a very cool little feature that added a nice but subtle bit of experience to my surfing, and I wondered why regular websites didn’t do the same. So I wrote a script for it.

It’s the small things

What is this functionality, then? When you put focus on a link in Opera Mini it puts a hover effect on not only the current link, but all other links with the same URL. This adds a tremendous amount of feedback each time you hover over a link. You can immediately see the context of the link: what other links go to the same URL and what are their link texts? It’s nothing ground breaking, but it’s small things like that that give a visitor a nice additional experience when visiting your website.

If you want to see it in action right now, here is the example: Context Hover – adding context & feedback to your links

The set up

I set out with the idea of evoking the :hover css style on all elements with the same URL. Unfortunately, that wasn’t going to happen since you can’t get those styles using JavaScript, nor can you fire a mouseover event. (Yes, you can do stuff after a mouseover event fired, but you can’t fire one yourself.)

So, I cheated

I think it’s a shame that you have to edit your CSS for this to work, but it seems like the only way until we get a way to fire a mouseover event on an element or get the :hover style of an element easily.

So instead of copying over the hover styles using JavaScript, I add a class to each :hover declaration I have in the CSS:

a:hover,
a.hover { … }

…and used JavaScript to add and remove the hover class when a user hovers in and out of the element. Using jQuery, the current JavaScript comes in the form of a whopping 7 lines:

$("a").each(function() {
	var a = $("a[href="+$(this).attr("href")+"]");
	$(this).hover(
		function() {a.addClass("hover");},
		function() {a.removeClass("hover");}
	);
});

The end result: Context Hover (same link as above ;) )

This is the standard hover-function in jQuery. The first function executes with a mouseover-event, and the second with mouseout-event. The most interesting part of the entire code is this:

[href="+$(this).attr("href")+"]

Which is a so-called CSS Attribute selector. it looks like this: [attribute=value] { … } and selects elements matching (the value of) the attribute.

It’s really useful, but unfortunately Internet Explorer 6 does not support it. If you want to read more about the CSS Attribute selector, Roger Johansson explains it in great detail in his post CSS 2.1 selectors, Part 2. It’s the last item in the blogpost.

Not so much the technique

As you can see, it’s not so much the technique that’s interesting. However, this adds a small layer of visual feedback to your websites that will make it just that little bit more enjoyable for your visitors. And that is, after all, why we do our best developing good websites.