Удалить нежелательный эффект парения

Question

я в настоящее время эффект парения, написанный на CSS:

h2:hover{ 
    background-color: #FFE4B5; 
    border-bottom: 1px solid #888; 
    border-top: 1px solid #888; 
    cursor: pointer; 
} 

Но я заметил, что когда я зависать каждый из вариантов меню, текст будет двигаться немного вверх, а затем вниз. Я не добавил ничего, что могло бы вызвать это? Я не думаю .. Как я могу исправить это и заставить их оставаться на месте, когда они парят?

JSfiddle here

Answer 1

Это граница, которая добавляется и удаляется, что вызывает эту проблему.

Два варианта: добавьте box-sizing: border-box к элементу или добавьте прозрачные границы для не зависающих элементов.

Пример коробчатого проклейки:

h2 { 
    box-sizing: border-box; 
} 

Пример границы:

h2 { 
    border-top: transparent 1px solid; 
    border-bottom: transparent 1px solid; 
} 

Answer 2

Движение идет от границы добавляемого и удаляется при наведении курсора мыши. Легко исправить, чтобы дать элементу h2 прозрачную границу те же ширины, когда он не колебались:

h2{ 
    border-bottom: 1px solid transparent; 
    border-top: 1px solid transparent; 
}