The proper way to add border to images in a link when it is being hovered
2 Jun
I don’t like to add special effects when a link is being hovered, as I think that the reader should be able to identify links without moving the mouse, and when the courser is over a link it should be enough that the cursor changes from an “arrow” to a “hand”. Some people think otherwise and most of them like to add some kind of border around the link when it is being hovered.
The problem with adding a border around a link is that it expends the area the browser reserves for the link and cause a redraw of the content. Most of the times when the link is a textual link there is no ill effect, but when the link is actually an image the content around it will “jump” to accommodate the new size of the link (image + border).
The best way to avoid the “jump” is to preallocate an empty space around the image which will be used to display the border.
For example if our current CSS rules are
a:hover {text-decoration:none;}
.entry a:hover {border-bottom:1px dotted; }
Should be changed to
a:hover {text-decoration:none;}
.entry a:hover {border-bottom:1px dotted; padding-bottom:0;}
.entry a {padding-bottom:1px;}
