Wie kann ich verhindern, dass CSS-Hover-Ränder benachbarte Elemente verschieben?

Anpassen der Elementpositionierung mit CSS-Hover-Rändern

Das Erstellen von Hover-Effekten mit CSS-Rändern kann manchmal dazu führen, dass benachbarte Elemente leicht verschoben oder „springen“. Dieses Problem tritt auf, wenn der Rahmen dem Element zusätzliche Breite verleiht, was zu einer Änderung der Positionierung im Vergleich zu anderen nicht umrandeten Elementen führt.

Lösung: Transparente Ränder

Um diese Positionierung zu beheben Problem: Fügen Sie dem Nicht-Hover-Status des Elements einen transparenten Rahmen hinzu. Dadurch wird sichergestellt, dass alle Elemente unabhängig von ihrem Hover-Status die gleiche Breite haben, wodurch unerwartete Verschiebungen vermieden werden.

Beispiel: Vertikales Ankermenü

Stellen Sie sich ein vertikales Menü mit darin enthaltenen Ankern vor eine ungeordnete Liste. Das folgende CSS-Snippet veranschaulicht das Problem:

div a:visited, #homeheader a {
    text-decoration: none;
    color: black;
    margin-right: 5px;
}

div a:hover {
    background-color: #D0DDF2;
    border-radius: 5px;
    border: 1px solid #102447;
}

div li {
    padding: 0;
    margin: 0px 10px;
    display: inline;
    font-size: 1em;
}

Wenn Sie den Mauszeiger über einen Anker bewegen, werden alle Anker links aufgrund des hinzugefügten Rahmens leicht nach rechts verschoben.

Um dies zu beheben, Dem Nicht-Hover-Zustand kann ein transparenter Rahmen hinzugefügt werden:

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

Diese Änderung stellt sicher, dass alle Anker eine einheitliche Breite haben, wodurch das eliminiert wird „Jumpiness“-Effekt und Aufrechterhaltung der richtigen Elementpositionierung.

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