Comment empêcher le déplacement d'un élément lors de l'ajout de bordures CSS déclenchées par le survol ?

Évitez le décalage d'élément avec les bordures CSS déclenchées par le survol

Vous ajoutez une surbrillance d'arrière-plan à une ligne lors du survol, mais remarquez un message indésirable mouvement provoqué par la bordure supplémentaire de 1 px. Sans recourir aux images de fond, comment compenser ce déplacement ?

Solution :

Pour éviter que l'élément ne bouge, vous pouvez rendre la bordure transparente. De cette façon, la bordure reste présente mais invisible, éliminant toute poussée potentielle contre l'élément.

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

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

Cette modification garantit que l'effet de survol conserve son comportement prévu sans perturber la position de l'élément.

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!