Comment puis-je empêcher les effets de survol de déplacer des éléments absolument positionnés ?

Ajustement des bordures de survol CSS : garantir un positionnement absolu

Lors de l'application d'effets de survol à des éléments avec des bordures, il n'est pas rare de rencontrer un léger repositionnement dû à la largeur ajoutée. Cela peut être frustrant, en particulier pour les éléments qui nécessitent un alignement précis.

Problème :

Considérez une liste non ordonnée d'ancres avec un effet de survol qui ajoute des bordures. En survolant une ancre, les autres ancres vers la gauche se décalent légèrement, perturbant la disposition globale.

Solution :

Pour conserver un positionnement absolu, ajoutez une bordure transparente à l'état de non-survol des éléments. Cela sert d'espace réservé, empêchant la nervosité inattendue lorsque la bordure réelle apparaît en survol.

CSS :

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

Cette modification ajoute une bordure transparente aux ancres. dans l'état initial. Lorsque l'état de survol est appliqué, la bordure solide réelle apparaît sans provoquer de repositionnement.

Démo :

Visitez la démo JS Fiddle mise à jour suivante pour voir la solution en action :

http://jsfiddle.net/TEUhM/3/

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!