Wie füge ich beim Hover CSS-Ränder hinzu, ohne dass Elemente verschoben werden?

Hinzufügen von CSS-Rändern beim Hover ohne Elementbewegung

Beim Anwenden eines hervorgehobenen Hintergrunds auf ein Element bei Hover-Effekten kann das Hinzufügen eines CSS-Rands zu Problemen führen zu einem unerwarteten Ergebnis. Der zusätzliche 1-Pixel-Rand verbreitert das Element und führt zu einer Verschiebung seiner Position. Wie können wir damit umgehen, ohne auf einen Hintergrundbild-Ansatz zurückzugreifen?

Die Lösung besteht darin, zunächst einen transparenten Rand auf dem Element zu erstellen:

.jobs .item {
   background: #eee;
   border: 1px solid transparent;
}

Auf diese Weise existiert der Rand aber bleibt unsichtbar und verhindert jegliche Bewegung. Wenn Hover-Effekte angewendet werden:

.jobs .item:hover {
   background: #e1e1e1;
   border: 1px solid #d0d0d0;
}

Der hervorgehobene Hintergrund wird zusammen mit dem farbigen Rand angewendet, aber der Rand verändert die Abmessungen des Elements nicht, da es bereits transparent ist. Dadurch bleibt die Position des Elements beim Schweben konstant.

Das obige ist der detaillierte Inhalt vonWie füge ich beim Hover CSS-Ränder hinzu, ohne dass Elemente verschoben werden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!