Wie kann ich verhindern, dass Hover-Effekte absolut positionierte Elemente verschieben?

CSS-Hover-Randanpassung: Absolute Positionierung sicherstellen

Beim Anwenden von Hover-Effekten auf Elemente mit Rändern kommt es nicht selten zu leichten Neupositionierungen aufgrund von die zusätzliche Breite. Dies kann frustrierend sein, insbesondere bei Elementen, die eine präzise Ausrichtung erfordern.

Problem:

Stellen Sie sich eine ungeordnete Liste von Ankern mit einem Hover-Effekt vor, der Ränder hinzufügt. Wenn Sie den Mauszeiger über einen Anker bewegen, verschieben sich die anderen Anker nach links leicht und stören das Gesamtlayout.

Lösung:

Um die absolute Positionierung beizubehalten, fügen Sie einen transparenten Rahmen hinzu der Nicht-Schwebezustand der Elemente. Dies dient als Platzhalter und verhindert die unerwartete Unruhe, wenn der eigentliche Rahmen beim Schweben erscheint.

CSS:

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

Diese Änderung fügt den Ankern einen transparenten Rahmen hinzu im Ausgangszustand. Wenn der Schwebezustand angewendet wird, wird der tatsächliche durchgezogene Rahmen angezeigt, ohne dass es zu einer Neupositionierung kommt.

Demo:

Besuchen Sie die folgende aktualisierte JS Fiddle-Demo, um die Lösung in Aktion zu sehen :

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

Das obige ist der detaillierte Inhalt vonWie kann ich verhindern, dass Hover-Effekte absolut positionierte Elemente verschieben?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!