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!