Wie kann eine Elementverschiebung beim Hinzufügen von durch Hover ausgelösten CSS-Rändern verhindert werden?

Elementverschiebung mit durch Hover ausgelösten CSS-Rändern vermeiden

Sie fügen beim Hover eine Hintergrundhervorhebung zu einer Zeile hinzu, bemerken aber ein unerwünschtes Element Bewegung, die durch den zusätzlichen 1-Pixel-Rand verursacht wird. Wie kompensieren Sie diese Verschiebung, ohne auf Hintergrundbilder zurückzugreifen?

Lösung:

Um zu verhindern, dass sich das Element bewegt, können Sie den Rand transparent machen. Auf diese Weise bleibt die Grenze vorhanden, aber unsichtbar, wodurch jeglicher Druck auf das Element ausgeschlossen wird.

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

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

Diese Modifikation stellt sicher, dass der Hover-Effekt sein beabsichtigtes Verhalten beibehält, ohne die Position des Elements zu stören.

Das obige ist der detaillierte Inhalt vonWie kann eine Elementverschiebung beim Hinzufügen von durch Hover ausgelösten CSS-Rändern verhindert werden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!