Wie kann verhindert werden, dass Elemente beim Schweben mit einem Rand verschoben werden?

Schwebender Rand verursacht leichte Elementanpassung

Problem:

Eine ungeordnete Liste von Ankern mit einem Hover-Ereignis fügt einen Rand hinzu , aber die Anker nach links verschieben sich beim Schweben aufgrund der zunehmenden Breite leicht. Wie können Sie eine absolute Positionierung sicherstellen?

Lösung:

Das Hinzufügen eines transparenten Rahmens zum Nicht-Hover-Zustand kann das „Sprunggefühl“ beim Erscheinen des Hover-Rands verhindern.

#homeheader a:visited, #homeheader a{
    border:1px solid transparent;
}

Erklärung:

Der transparente Rand ermöglicht die Breite von Der Anker muss konsistent bleiben, sodass es zu keiner Verschiebung der Positionierung kommt, wenn der Hover-Rahmen angezeigt wird. Hier ist eine JSFiddle-Demo:

http://jsfiddle.net/TEUhM/3/

Das obige ist der detaillierte Inhalt vonWie kann verhindert werden, dass Elemente beim Schweben mit einem Rand verschoben werden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!