A margem de foco do CSS faz com que os elementos incorporados se ajustem ligeiramente

Eu tenho uma lista desordenada cheia ou âncoras. Eu tenho um CSS: Hover evento que adiciona bordas para ele, mas todas as âncoras à esquerda ligeiramente ajustar quando eu passar o mouse porque ele está adicionando 1px para a largura e ajuste automático. Como posso ter certeza de que o posicionamento é absoluto?

Eu fiz um JS Fiddle aqui .

Você pode adicionar uma borda transparente ao estado não passar o mouse para evitar o “salto” quando a borda aparece:

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

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

Você também pode usar o outline , que não afetará a largura, ou seja, nenhum efeito de “salto”. No entanto, infelizmente, você não pode fazer um contorno arredondado.

Adicione uma margem de 1px e remova essa margem ao passar o mouse, para que ela seja substituída pela borda.

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

Você poderia usar uma sombra de checkbox, em vez de uma borda para esse tipo de funcionalidade.

Isso funciona porque a sua sombra não “toma tamanho no DOM” e, portanto, não afetará o posicionamento, ao contrário da borda.

Tente usar uma declaração como

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

em vez de seu

 border:1px solid #102447; 

em seu estado de foco.

Abaixo está uma demonstração rápida disso em ação:

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; } 
  

Você pode usar box-shadow, que não altera seu tamanho de checkbox, ao contrário da borda.

Aqui está um pequeno tutorial.

Basta adicionar o seguinte código ao seu arquivo css

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

O atributo CSS “box-sizing” corrigiu esse problema para mim. Se você der seu elemento

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

Em seguida, a largura da borda é adicionada ao interior da checkbox quando o navegador calcula sua largura. Dessa forma, quando você ativa e desativa o estilo de borda, o tamanho do elemento não muda (que é o que causa a tremulação observada).

Esta é uma nova tecnologia, mas o suporte para border box é bastante consistente . Aqui está uma demonstração !

Depois de tomar uma pressão muito tempo eu encontrei uma solução legal. Espero que isso ajude os outros.

no add o seguinte código:

HTML

 

title

Technology founders churn rate niche market

CSS

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

Verificar ao vivo: demonstração ao vivo

Espero que ajude.

Adicione uma margem negativa ao passar para compensar:

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

violino atualizado

No violino a margin: -1px; é um pouco mais complexo porque havia uma margin-right sendo sobreposta, mas ainda é apenas uma questão de subtrair o espaço recém-ocupado.

O método mais fácil que encontrei foi usar ‘outline’ em vez de ‘border’.

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

ao invés de

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

Funciona melhor!

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

Eu também estava enfrentando o mesmo problema. A correção mencionada por Wesley Murch funciona! isto é, adicionando uma borda transparente ao redor do elemento a ser observado.

Eu tinha um ul em que: hover foi adicionado a cada li. Toda vez, eu pairava em cada item da lista, os elementos contidos dentro de li também se moviam.

Aqui está o código relevante:

html

  

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; } 

O hover defn em cada item da lista:

 .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; } 

O código acima usado para fazer com que os elementos contidos mudem, sempre que eu passei por connectionsListItem. A correção foi adicionada ao css como:

 .connectionsListItem { border:1px solid transparent; } 

Use: before para criar a borda, assim não modificará o conteúdo atual e lhe dará mais liberdade. Confira aqui: http://codepen.io/jorgenrique/pen/JGqOMb

 
Border
Before
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; } } }

Ninguém mencionou isso aqui, mas a melhor e mais simples solução para isso, na minha opinião, é usar “sombra de checkbox” em vez de bordas. A mágica está no valor “inset” que permite ser como um pensionista.

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

Você pode compensar o X ou Y para alterar a parte superior / inferior e usar o valor negativo para lados opostos.

 .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; } 
 
Button