Jak se můžeme vyhnout otřesům, když najedeme na prvek a nastavíme jeho hranici?

Jak se můžeme vyhnout otřesům, když najedeme na prvek a nastavíme jeho hranici? Zde je ukázka kódu, který jsem napsal:

http://jsfiddle.net/s3N2h/

Existuje nějaká technika, jak se vyhnout otřesům? Předpokládejme, že najedu na Soubor, zobrazí se okraje, ale tento řádek textu se posune trochu doprava kvůli vykreslení okrajů. Pokud se vzneseme dál, znovu se otřese.

Existuje nějaký způsob CSS, jak se takovým otřesům vyhnout?

Odpověď

Obvyklým řešením tohoto problému je začít s průhledným okrajem a poté dát ohraničení barvu, když na něj najedete myší.

Aktualizoval jsem vaše housle touto technikou:

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

CSS a 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');
});​