Warum verschieben sich benachbarte Elemente, wenn Sie mit der Maus über CSS-Ränder fahren?

Hover-Randanomalie in CSS

Beim Anwenden von Hover-Ereignissen auf Elemente mit Rändern tritt häufig ein Problem auf, bei dem sich Elemente verschieben, die an das schwebende Element angrenzen Position. Dies liegt daran, dass der Rahmen die Breite des Elements vergrößert, was dazu führt, dass der enthaltende Block sein Layout anpasst.

In diesem Szenario veranschaulicht eine ungeordnete Liste von Ankern, die mit :hover-Rändern verziert sind, dieses Problem. Beim Schweben verschieben sich die Anker nach links aufgrund des hinzugefügten 1-Pixel-Rands geringfügig.

Lösung: Elementpositionierung während des Schwebens beibehalten

Um diese Positionierungsanomalie zu verhindern, können Sie Folgendes tun Wenden Sie die folgende Technik an:

Fügen Sie einen transparenten Rand zum Nicht-Hover-Status des Elements hinzu. Dadurch wird sichergestellt, dass der für den Rahmen reservierte Platz bereits berücksichtigt ist, sodass sich das Layout nicht anpasst, wenn der Hover-Rahmen angezeigt wird.

Codebeispiel:

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

Von Durch die Einbindung dieser transparenten Umrandung eliminieren Sie effektiv die „Unruhe“, die durch das Erscheinen der schwebenden Umrandung verursacht wird, und sorgen so für eine stabile Positionierung der umgebenden Elemente.

Das obige ist der detaillierte Inhalt vonWarum verschieben sich benachbarte Elemente, wenn Sie mit der Maus über CSS-Ränder fahren?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!