La bordure de survol CSS permet d'ajuster légèrement les éléments en ligne

Question

J'ai une liste non ordonnée remplie d'ancres. J'ai un événement CSS :Hover qui ajoute des bordures, mais toutes les ancres à gauche s'ajustent légèrement lorsque je les survole, car il ajoute 1px à la largeur et s'ajuste automatiquement. Comment puis-je m'assurer que le positionnement est absolu ?

J'ai fait un violon JS aquí .

Answer 1

Personne ne l'a mentionné ici, mais le meilleur et le plus important le plus simple À mon avis, la solution à ce problème est d'utiliser des "box shadow" au lieu des bordures. La magie réside dans la valeur "inset" qui lui permet d'être comme une bordure.

box-shadow: inset 0 -3px 0 0 red;

Vous pouvez décaler le X ou le Y pour changer le haut/le bas et utiliser la valeur -négative pour les côtés opposés.

.button {
  width: 200px;
  height: 50px;
  padding: auto;
  background-color: grey;
  text-align: center;
}

.button:hover {
  box-shadow: inset 0 -3px 0 0 red;
  background-color: lightgrey;
}

<div class="button"> Button </div>

Answer 2

Vous pouvez utiliser box-shadow qui ne modifie pas la taille de votre boîte, contrairement à border.

Voici un petit tutoriel.

Answer 3

Le CSS "Attribut "box-sizing a réglé ce problème pour moi. Si vous donnez à votre élément

.class-name {
    box-sizing: border-box; 
}

Ensuite, la largeur de la bordure est ajoutée au à l'intérieur de de la boîte lorsque le navigateur calcule sa largeur. De cette façon, lorsque vous activez et désactivez le style de bordure, la taille de l'élément ne change pas (ce qui est à l'origine du sautillement que vous avez observé).

Il s'agit d'une nouvelle technologie, mais la prise en charge de border-box est assez cohérent . Voici un Démonstration !

Answer 4

Il suffit d'ajouter le code suivant dans votre fichier css

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

Answer 5

La méthode la plus simple que j'ai trouvée est d'utiliser "outline" au lieu de "border".

#home:hover{
outline:1px solid white;
}

au lieu de

#home:hover{
border:1px solid white;
}

C'est ce qui marche le mieux !

https://www.kirupa.com/html5/display_an_outline_instead_of_a_border_hover.htm