Warum verschiebt sich mein horizontales Menü beim Schweben und wie kann ich das mithilfe von Pseudoelementen beheben?

Elementausrichtung verschiebt sich beim Schweben aufgrund von Fettdruck

Bei der Implementierung eines horizontalen Menüs mithilfe von HTML-Listen und CSS kommt es häufig zu einer Verschiebung in der Ausrichtung von Menüelementen, wenn der Hover-Status angewendet wird. Diese Verschiebung tritt auf, weil die Fettschriftgröße im Hover-Zustand von der Standardschriftgröße abweicht.

Dieses Problem ähnelt einem, das in einem SitePoint-Beitrag besprochen wurde, es gibt jedoch keine klare Lösung. Das Festlegen der Breite der li-Elemente ist möglicherweise nicht möglich, wenn die Textbreite variiert.

Lösen der Ausrichtungsverschiebung

Eine Lösung liegt in der Verwendung eines unsichtbaren Pseudoelements Legen Sie die Breite des Elements fest. Dieses Pseudoelement spiegelt den Inhalt und Stil des Hover-Zustands wider und definiert effektiv die Breite des Elements, bevor der Hover-Zustand ausgelöst wird.

li {
    display: inline-block;
    font-size: 0;
}

li a {
    display:inline-block;
    text-align:center;
    font: normal 16px Arial;
    text-transform: uppercase;
}

a:hover {
    font-weight:bold;
}

/* SOLUTION */
/* The pseudo element has the same content and hover style, so it pre-sets the width of the element and visibility: hidden hides the pseudo element from actual view. */
a::before {
    display: block;
    content: attr(title);
    font-weight: bold;
    height: 0;
    overflow: hidden;
    visibility: hidden;
}

In dieser Lösung:

• Das Pseudo -element (::before) wird mit Blockanzeige definiert, wodurch die Breite des Elements voreingestellt werden kann.
• Es erbt den Inhalt und die Schriftstärke aus dem Hover-Zustand (mit attr(title) zum Festlegen des Inhalts).
• Die Höhe und der Überlauf des Pseudoelements werden auf 0 gesetzt bzw. ausgeblendet, um es nicht anzuzeigen.

Durch die Voreinstellung der Breite behalten die Menüelemente beim Schweben ihre Ausrichtung bei, unabhängig von der Textlänge oder der Breitenvariation.

Das obige ist der detaillierte Inhalt vonWarum verschiebt sich mein horizontales Menü beim Schweben und wie kann ich das mithilfe von Pseudoelementen beheben?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!