Pourquoi les éléments en ligne se déplacent-ils au survol lorsqu'une police en gras est appliquée, et comment les pseudo-éléments peuvent-ils résoudre ce problème ?

Déplacement des éléments en ligne au survol en raison d'un style gras

De nombreux développeurs rencontrent le problème du déplacement des éléments en ligne lorsque la police en gras est appliquée au survol. Les listes, par exemple, peuvent présenter ce problème lorsque les éléments de la liste ont un contenu textuel dynamique.

Dans l'exemple fourni, un menu horizontal est créé à l'aide de listes HTML et CSS, et un style de survol est appliqué pour mettre les liens en gras. Cependant, les éléments de menu se déplacent lors du survol en raison du changement de largeur des éléments provoqué par la police en gras.

Solution utilisant des pseudo-éléments

Pour résoudre ce problème, un astucieux La solution consiste à utiliser un pseudo-élément invisible pour prédéfinir la largeur de l'élément. Le contenu de ce pseudo-élément correspond à celui de l'élément parent et un style de survol lui est appliqué. En masquant visuellement ce pseudo-élément, nous pré-définissons effectivement la largeur de l'élément parent avant d'appliquer le style de survol en gras.

Voici le code CSS modifié :

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

En ajoutant le pseudo -element et le style de survol correspondant, la largeur de l'élément est prédéfinie avant l'application du style gras. Par conséquent, les éléments de menu ne changeront plus pendant le survol.

Utilisation et considérations

La valeur de l'attribut title de chaque lien doit correspondre au texte survolé attendu. . Cela garantit que le pseudo-élément prédéfinit correctement la largeur de chaque lien.

Il est important de noter que cette solution fonctionne spécifiquement pour les éléments en ligne qui ont un contenu textuel dynamique. Pour des éléments ou des scénarios plus complexes, des approches alternatives peuvent être nécessaires.

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!