Wie man die Bewegung der Box auf Hover stoppt?

Question

Ich habe eine Box in der es einen READ MORE Text gibt. Hier ist die fiddle dafür. Beim Schweben bewegt sich die Box nach rechts. Ich frage mich, was ist der Grund dafür? How can I stop its movement ?

Unten ist mein CSS-Code:

.chrisdavenport-middle24-text{ 
    position: absolute; 
    top: 290px; 
    /* font-style: italic; */ 
    font-family: "Adelle PE"; 
    padding-right: 200px; 
    /* font-size: 16px; */ 
    padding-left: 200px; 
    border-style: solid; 
    padding-top: 10px; 
    padding-bottom: 10px; 
    color: orange; 
    line-height: 1.379; 
    font-size: 16px; 
    font-family: "Adelle PE"; 
    color: red; 
    right: 35px; 
    letter-spacing: 0.300em; 
} 

.chrisdavenport-middle24-text:hover { 
    font-weight: bold; 
    font-style: italic; 
} 

Answer 1

Die Box nicht bewegt, es wird nur ein wenig breiter (rechts ausgerichtet ist, so geht der linke Rand auf die ein wenig nach links). Das liegt daran, dass die fett- und kursive Schrift etwas mehr horizontalen Raum einnimmt als die normale Schriftart.

Um dies zu vermeiden, können Sie eine feste Breite auf dem Feld verwendet werden: Löschen Sie die padding-right und padding-left und es text-align: center und eine entsprechende Einstellung width geben.

Hier ist die nach Geige: https://jsfiddle.net/ghwzzyjy/1/

Answer 2

Die Box eigentlich nicht bewegt, es ist nur breiter bekommen, weil Sie das Gewicht und die Art des Gusses sind zu ändern. Um diesen Fehler zu beheben, müssen Sie entweder Ihrem Absatz-Tag eine "width" -Eigenschaft zuweisen oder diese Breite implizieren, indem Sie ihm eine "left" -Eigenschaft geben, um das "richtige" Gegenstück zu ergänzen, das Sie bereits oben verwenden. Dadurch wird die Breite eingeschränkt und die Größe der Box wird nicht geändert.

.chrisdavenport-middle24-text{ 
    position: absolute; 
    top: 290px; 
    left: 0; 
    right: 0; 

    padding: 10px 200px; 

    font-family: "Adelle PE"; 
    line-height: 1.379; 
    font-size: 16px; 
    letter-spacing: 0.300em; 
    text-align: center; 

    border-style: solid; 
    color: red; 
} 

.chrisdavenport-middle24-text:hover { 
    font-weight: bold; 
    font-style: italic; 
} 

https://jsfiddle.net/csybh5ze/3/