Как мы можем избежать тряски, когда мы наводим на элемент и устанавливаем его границу?

Как мы можем избежать тряски, когда мы наводим на элемент и устанавливаем его границу? Вот пример кода, который я написал:

http://jsfiddle.net/s3N2h/

Есть ли способ избежать тряски? Предположим, что я наводил указатель на File, появляются границы, но эта строка текста немного сдвигается вправо из-за того, что границы отображаются. Если мы его снова навешиваем, то трясет.

Есть ли какой-либо способ CSS избежать таких потрясений?

Ответ 1

Обычное решение этой проблемы - начать с прозрачной границы, а затем дать границе цвету при наведении.

Я обновил вашу скрипку с помощью этой техники:

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

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

Ответ 2

В качестве альтернативы при настройке границы добавьте отрицательное поле того же размера.