Comment puis-je empêcher les bordures de survol CSS de déplacer les éléments adjacents ?

Ajustement du positionnement des éléments avec les bordures de survol CSS

La création d'effets de survol avec des bordures CSS peut parfois provoquer le déplacement ou le "saut" léger des éléments adjacents. Ce problème survient lorsque la bordure ajoute une largeur supplémentaire à l'élément, provoquant un changement de positionnement par rapport à d'autres éléments sans bordure.

Solution : Bordures transparentes

Pour résoudre ce positionnement problème, ajoutez une bordure transparente à l’état de non-survol de l’élément. Cela garantit que tous les éléments ont la même largeur quel que soit leur état de survol, évitant ainsi tout décalage inattendu.

Exemple : Menu d'ancrage vertical

Considérons un menu vertical d'ancres dans une liste non ordonnée. L'extrait CSS suivant illustre le problème :

div a:visited, #homeheader a {
    text-decoration: none;
    color: black;
    margin-right: 5px;
}

div a:hover {
    background-color: #D0DDF2;
    border-radius: 5px;
    border: 1px solid #102447;
}

div li {
    padding: 0;
    margin: 0px 10px;
    display: inline;
    font-size: 1em;
}

Le survol d'une ancre entraînera un léger déplacement de toutes les ancres de gauche vers la droite en raison de la bordure ajoutée.

Pour corriger cela, une bordure transparente peut être ajoutée à l'état de non-survol :

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

Cette modification garantit que toutes les ancres ont une largeur constante, éliminant ainsi le effet de « nervosité » et maintien du bon positionnement des éléments.

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!