Comment empêcher le déplacement d'un élément en ligne lors d'un survol en gras ?

Déplacement des éléments en ligne lors d'un survol en gras : une solution complète

Dans le monde de la conception Web, créer un menu de navigation élégant et réactif est un tâche fondamentale. Cependant, lors de l'ajout d'un effet de survol en gras aux liens en ligne, nous rencontrons souvent un problème déroutant : les éléments de menu se déplacent sensiblement en raison de la différence de taille entre le texte normal et le texte en gras. Ce problème a intrigué de nombreux développeurs, les obligeant à rechercher des solutions efficaces.

Heureusement, une technique intelligente peut résoudre ce défi. En préréglant la largeur des liens, nous pouvons garantir que la transition vers le texte en gras au survol se produit de manière transparente sans aucune perturbation de la disposition du menu. Ceci est réalisé en utilisant un pseudo-élément invisible qui partage le même contenu et le même style de survol que son lien parent.

Pour illustrer la solution, considérons le code suivant :

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

Avis l'ajout du pseudo-élément a::before. Cet élément affiche le même contenu que son lien parent, mais il est masqué à l'aide de l'option visibilité : caché. Surtout, il hérite du poids de la police grasse de l'état de survol, préréglant ainsi la largeur du lien sur son homologue en gras.

Pour compléter la solution, nous attribuons un attribut de titre unique à chaque lien, qui sert comme source du contenu du pseudo-élément. Cela garantit que le pseudo-élément correspond au texte de son lien parent, préservant ainsi l'apparence originale du menu.

Avec cette technique, l'effet de survol gras sur les liens en ligne peut être obtenu sans aucun changement discordant dans la position des éléments de menu. . C'est une solution simple mais efficace qui résout un problème courant rencontré par les développeurs Web.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!