текст прыгает 1 пиксель влево после наведения

Question

Я сделал jsfiddle, и, как вы можете видеть, когда вы наводите div, текст перескакивает на 1 пиксель влево. Насколько я могу сказать, это связано с границей, но я не уверен, что делать, чтобы исправить это. Есть идеи?

Вот мой код:

#weather { 
position: fixed; 
top:10px; 
right:35px; 
transition: 0.5s ease; 
cursor: pointer; 
padding: 5px; 
opacity:0.7; 
} 

#weather:hover { 
opacity: 1; 
border-left:1px solid #333; 
border-right:1px solid #333; 
} 

Answer 1

CSS:

#weather { 
    position: fixed; 
    top:10px; 
    right:35px; 
    transition: 0.5s ease; 
    cursor: pointer; 
    padding: 5px; 
    border-left:1px solid transparent; 
    border-right:1px solid transparent; 
} 

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

JSFiddle

Answer 2

Это вызвано добавлением 1px границы к CSS. Чтобы решить проблему, добавьте 1px белые границы, чтобы начать - или, я только заметил, что у Kawinesh есть лучшее решение - используйте прозрачный прозрачный 1px. +1 к Кавинешу.

#weather { 
    position: fixed; 
    top:10px; 
    right:35px; 
    transition: 0.5s ease; 
    cursor: pointer; 
    padding: 5px; 
    border-left:1px solid white; 
    border-right:1px solid white; 
} 

jsFiddle Demo