Question

How can we avoid the shake when we hover over an element and set its border? Here is a sample of the code I wrote:

http://jsfiddle.net/s3N2h/

Is there a technique to avoid the shaking? Suppose I hover on File, the borders appears, but that line of text moves a little to the right due to the borders getting rendered. If we hover away it again shakes.

Is there any CSS way of avoiding such shakes?

Answer 1

The usual solution to this problem is to start off with a transparent border, then give the border a colour on hover.

I’ve updated your fiddle with this technique:

http://jsfiddle.net/s3N2h/1/

CSS and JavaScript:

#my_menu li {
    border: 1px solid transparent;
}

li.hover(function() {
    $(this).css('border-color', 'white #808080 #808080 white');
}, function() {
    $(this).css('border-color', 'transparent');
});​