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

Ajoutez une marge négative au survol pour compenser :

#homeheader a:hover{
    border: 1px solid #102447;
    margin: -1px;
}

mise à jour du violon

Dans le violon, le margin: -1px; est un peu plus complexe car il y avait un margin-right est remplacé, mais il s'agit toujours de soustraire l'espace nouvellement occupé.

Answer 2

Moi aussi, j'ai rencontré le même problème. La solution mentionnée par Wesley Murch fonctionne ! Il s'agit d'ajouter une bordure transparente autour de l'élément à survoler.

J'avais un ul sur lequel :hover était ajouté à chaque li. Chaque fois que je passais le curseur sur un élément de la liste, les éléments contenus dans les li se déplaçaient également.

Voici le code correspondant :

html

<ul>           
    <li class="connectionsListItem" id="connectionsListItem-0">     
        <div class="listItemContentDiv" id="listItemContentDiv-0">
            <span class="connectionIconSpan"></span>
            <div class="connectListAnchorDiv">
            <a href="../test/1.html" class="homeConnectionListanchor" id="leftTabConnectionListAnchor-0">Test1</a>
            </div>
        </div>
    </li>
</ul>

css

.listItemContentDiv
{
    display: inline-block;
    padding: 8px;
    right: 0;
    text-align: left;
    text-decoration: none;
    text-indent: 0;
}

.connectionIconSpan
{
    background-image: url("../images/connection4.png");
    background-position: 100% 50%;
    background-repeat: no-repeat;
    cursor: pointer;
    padding-right: 0;
    background-color: transparent;
    border: medium none;
    clear: both;
    float: left;
    height: 32px;
    width: 32px;
}

.connectListAnchorDiv
{
    float: right; 
    margin-top: 4px;
}

La défn du survol sur chaque élément de la liste :

.connectionsListItem:hover
{
    background-color: #F0F0F0;
    background-image: linear-gradient(#E7E7E7, #E7E7E7 38%, #D7D7D7);
    box-shadow: none;
    text-shadow: none;
    border-radius: 10px 10px 10px 10px;
    border-color: #AAAAAA;
    border-style: solid;

}

Le code ci-dessus avait pour effet de déplacer les éléments contenus, lorsque je passais la souris sur connectionsListItem. La solution a consisté à ajouter ce code au code CSS :

.connectionsListItem
{
    border:1px solid transparent;
}

Answer 3

Utilisez l'option :before pour créer la bordure. De cette façon, le contenu ne sera pas modifié et vous aurez plus de liberté. Découvrez-le ici : http://codepen.io/jorgenrique/pen/JGqOMb

<div class='border'>Border</div>
<div class='before'>Before</div>
div{
  width:300px;
  height:100px;
  text-align:center;
  margin:1rem;
  position:relative;
  display:flex;
  justify-content:center;
  align-items: center;
  background-color:#eee;
}
.border{
  border-left:10px solid deepPink;
}
.before{
  &:before{
    content:"";
    position:absolute;
    background-color:deepPink;
    width:10px;
    height:100%;
    left:0;
    top:0;
  }
  &:hover{
    background-color:#ccc;
    &:before{
      width:0px;
      transition:0.2s;  
    }
  }
}