Pourquoi les éléments adjacents se déplacent-ils lors du survol des bordures CSS ?

Anomalie de bordure de survol dans CSS

Lors de l'application d'événements de survol à des éléments avec des bordures, un problème courant survient lorsque les éléments adjacents à l'élément survolé se déplacent position. En effet, la bordure augmente la largeur de l'élément, ce qui oblige le bloc conteneur à ajuster sa disposition.

Dans ce scénario, une liste non ordonnée d'ancres ornées de bordures :hover démontre ce problème. Au survol, les ancres vers la gauche se déplacent subtilement en raison de la bordure de 1 px ajoutée.

Solution : maintenir le positionnement des éléments pendant le survol

Pour éviter cette anomalie de positionnement, vous pouvez utilisez la technique suivante :

Ajoutez une bordure transparente à l'état de non-survol de l'élément. Cela garantit que l'espace réservé pour la bordure est déjà pris en compte, empêchant la mise en page de s'ajuster lorsque la bordure de survol apparaît.

Exemple de code :

#homeheader a:visited, #homeheader a{
    border:1px solid transparent;
}

Par en incorporant cette bordure transparente, vous éliminez efficacement la « nervosité » provoquée par l'apparition de la bordure en survol, assurant un positionnement stable des éléments environnants.

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!