Kilian Valkhof

Front-end & user experience developer, Jedi.

Context Hover, adding context & feedback to your links

CSS & HTML, 26 May 2008

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.

Thanks for Reading!

I am Kilian Valkhof, a front-end and user experience developer from the Netherlands.
Contact me or ping me on twitter.

  1. Ooh, I love the example setup. Very nicely done (and pretty typography!) :D

    That’s probably fancier than I’ll ever take my CSS, but it does sort of cross into UI design, which is something I really enjoy reading about — and maybe writing about, but that’s to be determined later ;)

  2. Not working on Konqueror :P

  3. Luca

    Really a great idea :)

  4. eod

    nice

  5. No effect in FF 3.

  6. John, this code was ‘developed’ on firefox 3. Like jQuery itself it should just work :)

  7. […] añadir un poco más de usabilidad a nuestros sitios. Todo esto lo digo gracias al artículo de Kilian Valkhov, que al comprobar lo práctico de esa interesante característica de Opera Mini, decidió emularla […]

  8. […] Context Hover, es un agradable tips desarrollado por Kilian Valkhov, donde empleando jQuery y CSS, podremos resaltar todos nuestros enlaces similares (url externa hacia un mismo sitio) a la misma vez, cuando hagamos MouseOver sobre alguno de ellos. Un tip que puede ser muy interesante para algunas cosas. […]

  9. […] Context Hover hace que los enlaces que apuntan al mismo tiempo se resalten al mismo tiempo cuando se hace hover en uno de ellos. Su autor, Kilian Valkhov vio este añadido a la usabilidad en el navegador para móviles Opera Mini y decidió emularlo con la ayuda de jQuery y CSS. […]

  10. […] 12- Context Hover, adding context & feedback to your links […]

  11. […] 12- Context Hover, adding context & feedback to your links […]

  12. What an excellent idea! it is a bit of a pain to set up hover classes for it, but the end result is very useful. Thanks for putting this together :)

  13. […] of the things I feel I did not cover enough in my first article is the accessibility side of things. This has led to a Spanish article adding focus and blur events […]

  14. Rob

    Very nice idea, UI design is something I’m really getting into now, seeing as how it’s such a core discipline to what we do.

    I may have to give opera mini a whirl, but safari on the ipod is getting more of my attention at the moment, it’s interesting seeing which website UIs work well with it because there’s no way to just ‘hover’ an element and as far as I know you can’t tab through links either, it’s either a click or it’s not which raises some issues with UIs that rely on hover effects. In a way it’s a limitation of the touch screen interface devices that would be solved by the ability to tab through.

    Good stuff though, I’ll definitely be using this, cheers Kilian

  15. […] Context Hover, é um agradavel dicas desenvolvido por “http://kilianvalkhof.com/2008/css-xhtml/context-hover-adding-context-feedback-to-your-links” target=”_blank”>Kilian Valkhov, aonde aplicando jQuery e CSS, podemos realçar todos nossos links similares(url externa para o mesmo site) de uma única vez quando fazemos MouseOver sobre algum dos links. Uma dica que pode ser muito útil algum dia, em Algum projeto. […]

  16. […] 12- Context Hover, adding context & feedback to your links […]

  17. […] 12- Context Hover, adding context & feedback to your links […]

  18. […] 12- Context Hover, adding context & feedback to your links […]

  19. […] site kilianvalkhof.com publicou uma solução em CSS e javascript que permite destacar todos os links de uma página que […]

  20. Another way to go about this is:

    $(‘a[href]’).hover(function () {
    $(this).toggleClass(‘hover’);
    });

    the $(‘a[href]’) tests for all ‘a’ tags with an href attribute, regardless of what the attribute is set to.

  21. Oh, neat… I didn’t realize it was meant to highlight all links with the same destination.

    $(‘a[href]’).hover(function () {
    $(‘a[href=”‘ + $(this).attr(‘href’) + ‘”]’).toggleClass(‘hover’);
    });

  22. Hey Josh, What you forget is the caching of matching elements achieved by using the var, which makes it much faster. You also need to toggle the class again to remove the hover style on all other a’ once you mouseOut again. :)

  23. @Kilian –

    You’re right about the caching, nifty usage of closures. As of jQuery 1.4, when you only pass one function into hover(), it executes it on both mouseenter and mouseleave.

  24. This was just what I’ve been looking for. Thank you. I knew it was an addclass, but I couldn’t get it to work.

  25. Shawn

    this is almost what ive been looking for. i have a picture that’s image mapped and when i hover over a link on the image, i want the link listed at the bottom of the picture to have the hover effect. any thoughts?