Comment ajouter des bordures CSS au survol sans décalage d'élément ?

Ajout de bordures CSS au survol sans mouvement d'élément

Lors de l'application d'un arrière-plan en surbrillance à un élément lors des effets de survol, l'ajout d'une bordure CSS peut entraîner à un résultat inattendu. La bordure supplémentaire de 1 px élargit l'élément, l'amenant à déplacer sa position. Comment gérer cela sans recourir à une approche d'image de fond ?

La solution réside dans la création d'une bordure transparente sur l'élément pour commencer :

.jobs .item {
   background: #eee;
   border: 1px solid transparent;
}

De cette façon, la bordure existe mais reste invisible, empêchant tout mouvement de se produire. Lorsque des effets de survol sont appliqués :

.jobs .item:hover {
   background: #e1e1e1;
   border: 1px solid #d0d0d0;
}

L'arrière-plan en surbrillance est appliqué avec la bordure colorée, mais la bordure ne modifie pas les dimensions de l'élément puisqu'il est déjà transparent. En conséquence, la position de l'élément reste cohérente au survol.

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!