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

Vous pouvez ajouter une bordure transparente à l'état non survolé afin d'éviter les sauts lorsque la bordure apparaît :

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

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

Answer 2

Vous pouvez également utiliser outline ce qui n'affectera pas la largeur, c'est-à-dire qu'il n'y aura pas d'effet de "saut". Toutefois, vous ne pouvez malheureusement pas arrondir un contour.

Answer 3

Vous pourriez utiliser une ombre portée plutôt qu'une bordure pour ce type de fonctionnalité.

Cela fonctionne parce que votre ombre ne "prend pas de taille dans le DOM" et n'affecte donc pas le positionnement, contrairement à une bordure.

Essayez d'utiliser une déclaration comme

box-shadow:0 0 1px 1px #102447;

au lieu de votre

border:1px solid #102447;

sur votre état de survol.

Vous trouverez ci-dessous une démonstration rapide de ce système en action :

DEMO

#homeheader a:visited,
#homeheader a {
  text-decoration: none;
  color: black;
  margin-right: 5px;
}
#homeheader a:hover {
  background-color: #D0DDF2;
  border-radius: 5px;
  box-shadow: 0 0 1px #102447;
}
#homeheader li {
  padding: 0;
  margin: 0px 10px;
  display: inline;
  font-size: 1em;
}

<div id="homecontainer">
  <div id="homeheader">
    <ul>
      <li><a href="#">this</a>
      </li>
      <li><a href="#">that</a>
      </li>
      <li><a href="#">this again</a>
      </li>
      <li><a href="#">that again</a>
      </li>
    </ul>
  </div>
</div>

Answer 4

Ajoutez une marge de 1px et supprimez cette marge au survol, afin qu'elle soit remplacée par la bordure.

http://jsfiddle.net/TEUhM/4/

Answer 5

Après une longue pression, j'ai trouvé une solution sympa. J'espère qu'elle aidera d'autres personnes.

sur le site ajouter le code suivant :

HTML

<div class="border-test">
  <h2> title </h2>
  <p> Technology founders churn rate niche market </p>
</div>

CSS

.border-test {
  outline: 1px solid red;
  border: 5px solid transparent;
}
.border-test:hover {
  outline: 0px solid transparent;
  border: 5px solid red;
}

Vérifiez en direct : Démonstration en direct

J'espère que cela vous aidera.