Why and how to highlight hyperlinks on mouse hover
Hyperlinks should be highlighted on mouse hover. This provides feedback necessary for the user to feel that the element is clickable. It is equally good to highlight the borders of the images and other non-text elements. I use red as the highlight color, and it works well.
Interestingly, changing mouse pointer from an arrow to a hand is not quite enough. The pointer is my avatar on the screen, so changing it just reinforces the idea that I am aiming to click an element, not that the element is going to respond to my click.
Since CSS provided us with an easy way to add nice transitions to web pages, some designers have implemented fading in and out of the said highlight color. But using fade-in defeats the purpose of the effect: when an element’s color fades-in lazily on hover, the feeling of responsiveness disappears and a page starts to feel numb.
I use only the fade-out transition, i. e. instantly change an element’s color to red on hover, then gradually change it back to blue when mouse moves away. Here are some links to my previous posts to test the effect (will not work in your RSS readers, obviously):
