Wie verhindert man die Verschiebung von Inline-Elementen bei fettem Hover?

Inline-Elemente verschieben sich bei fettem Hover: Eine umfassende Lösung

In der Welt des Webdesigns ist die Erstellung eines schlanken und reaktionsfähigen Navigationsmenüs eine Herausforderung grundlegende Aufgabe. Beim Hinzufügen eines fetten Hover-Effekts zu Inline-Links stoßen wir jedoch häufig auf ein verwirrendes Problem: Die Menüelemente verschieben sich aufgrund des Größenunterschieds zwischen normalem und fettem Text merklich. Dieses Problem hat viele Entwickler verwirrt und sie dazu veranlasst, nach effektiven Lösungen zu suchen.

Glücklicherweise kann eine clevere Technik diese Herausforderung lösen. Indem wir die Breite der Links voreinstellen, können wir sicherstellen, dass der Übergang zu fettem Text beim Hover nahtlos erfolgt, ohne dass das Layout des Menüs beeinträchtigt wird. Dies wird durch die Verwendung eines unsichtbaren Pseudoelements erreicht, das denselben Inhalt und denselben Hover-Stil wie sein übergeordneter Link aufweist.

Um die Lösung zu veranschaulichen, betrachten wir den folgenden Code:

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;
}

Hinweis das Hinzufügen des Pseudoelements a::before. Dieses Element zeigt denselben Inhalt wie sein übergeordneter Link an, wird jedoch mit der Option „visibility:hidden“ ausgeblendet. Entscheidend ist, dass es die fette Schriftstärke des Hover-Status übernimmt und so die Breite des Links effektiv auf sein fettes Gegenstück voreinstellt.

Um die Lösung zu vervollständigen, weisen wir jedem Link, der dient, ein eindeutiges Titelattribut zu als Quelle für den Inhalt des Pseudoelements. Dadurch wird sichergestellt, dass das Pseudoelement mit dem Text seines übergeordneten Links übereinstimmt und das ursprüngliche Erscheinungsbild des Menüs erhalten bleibt.

Mit dieser Technik kann der fette Hover-Effekt auf Inline-Links ohne störende Verschiebungen in der Position der Menüelemente erzielt werden . Es handelt sich um eine einfache, aber effektive Lösung, die ein häufiges Problem löst, mit dem Webentwickler konfrontiert sind.

Das obige ist der detaillierte Inhalt vonWie verhindert man die Verschiebung von Inline-Elementen bei fettem Hover?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!