Wie kann ich verhindern, dass sich horizontale Menüelemente verschieben, wenn der Text beim Schweben fett wird?

Inline-Elemente verschieben sich, wenn sie beim Schweben fett dargestellt werden

Wenn Elemente in einem horizontalen Menü beim Schweben verschoben werden, kann dies auf die Größenunterschiede zwischen normalem und fettem Text zurückzuführen sein . In diesem Artikel wird die Lösung für dieses häufige Problem untersucht.

Das Problem verstehen

Im bereitgestellten Beispiel werden HTML-Listen und CSS verwendet, um ein horizontales Menü zu erstellen. Wenn Sie mit der Maus über Links fahren, wird der Text fett dargestellt, wodurch sich die Links aufgrund der unterschiedlichen Breite zwischen normalem und fett gedrucktem Text verschieben.

Stellen Sie die Breite vor

Die Lösung besteht aus einer Voreinstellung die Breite der Elemente mithilfe eines unsichtbaren Pseudoelements. Dieses Pseudoelement enthält denselben Inhalt und Stil wie der Hover-Status des übergeordneten Elements.

a::before {
    display: block;
    content: attr(title);
    font-weight: bold;
    height: 0;
    overflow: hidden;
    visibility: hidden;
}

• Anzeige: Block: Lässt das Pseudoelement die gesamte Breite seines Containers einnehmen .
• Inhalt: attr(title): Ruft den Inhalt aus dem Titelattribut des übergeordneten Elements ab und ermöglicht die Freigabe der gleiche Text.
• Schriftstärke: fett: Wendet den fetten Stil auf das Pseudoelement an.
• Höhe: 0; Überlauf: versteckt; Sichtbarkeit: ausgeblendet: Versteckt das Pseudoelement vor der Ansicht und stellt sicher, dass es das Gesamterscheinungsbild des Elements nicht beeinträchtigt.

Durch die Verwendung eines Pseudoelements mit diesen Eigenschaften wird die Breite des Elements geändert wird bereits vor der Anwendung des Schwebezustands voreingestellt, wodurch das Schaltproblem beseitigt wird.

Das obige ist der detaillierte Inhalt vonWie kann ich verhindern, dass sich horizontale Menüelemente verschieben, wenn der Text beim Schweben fett wird?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!