Il bordo del hover CSS rende gli elementi in linea leggermente regolabili

Question

Ho una lista non ordinata piena o ancore. Ho un CSS: evento Hover che aggiunge bordi ad esso, ma tutti gli ancoraggi a sinistra si adattano leggermente quando si passa il mouse perché aggiunge 1px alla larghezza e alla regolazione automatica. come posso assicurarmi che il posizionamento sia assoluto?

Ho realizzato un JS Fiddle here.

Answer 1

Aggiungere un margine di 1 px e rimuovere tale margine al passaggio del mouse, quindi viene sostituito dal bordo.

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

Answer 2

È possibile aggiungere un bordo trasparente allo stato non-hover per evitare il "nervosismo" quando appare il confine:

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

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

Answer 3

È inoltre possibile utilizzare outline, che non influenzerà la larghezza, quindi non l'effetto "salta". Tuttavia, sfortunatamente, non è possibile arrotondare un contorno.

Answer 4

Anch'io stavo affrontando lo stesso problema. Funziona la correzione menzionata da Wesley Murch! ad esempio aggiungendo un bordo trasparente attorno all'elemento da sospendere.

Avevo un ul su cui: hover è stato aggiunto a ogni li. Ogni volta, aleggiavo su ogni elemento della lista, anche gli elementi contenuti all'interno erano mossi.

Ecco il codice rilevante:

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 defn hover su ogni elemento della 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; 

} 

Il codice di cui sopra utilizzato per fare il cont gli elementi aining cambiano, ogni volta che mi librano su connectionsListItem. La correzione è stata aggiunta al css come:

.connectionsListItem 
{ 
    border:1px solid transparent; 
} 

Answer 5

È possibile utilizzare box-shadow che non modifica le dimensioni della casella, a differenza del bordo.

Here is a little tutorial.

Answer 6

Il CSS "box-sizing" attribute risolto questo problema per me. Se date il vostro elemento

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

Poi si aggiunge la larghezza del bordo al all'interno della scatola quando il browser calcola la sua larghezza. In questo modo quando si attiva e disattiva lo stile del bordo, la dimensione dell'elemento non cambia (che è ciò che causa il jitter osservato).

Questa è una nuova tecnologia, ma il supporto per border box is pretty consistent. Ecco uno demo!

Answer 7

È possibile utilizzare un'ombra di casella, piuttosto che un bordo per questo tipo di funzionalità.

Questo funziona perché la tua ombra non 'prende dimensioni nel DOM', e quindi non influenzerà il posizionamento, a differenza di quello di un bordo.

provare a utilizzare un dichiarazione come

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

al posto del tuo

border:1px solid #102447; 

sul vostro stato hover.

Qui di seguito un breve demo di questo in azione:

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 8

aggiungere un margine negativo al passaggio del mouse per compensare:

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

updated fiddle

Nel violino il margin: -1px; è un po 'più complesso perché è stato sostituito un margin-right, ma si tratta ancora solo di sottrarre lo spazio occupato di recente.

Answer 9

Usa: prima di creare il bordo, in questo modo non modificherà il contenuto effettivo e ti darà più libertà. Check it out qui: 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; 
    } 
    } 
} 

Answer 10

Basta aggiungere il seguente codice nel file css

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

Answer 11

Dopo aver preso una pressione molto tempo ho trovato una soluzione fresca. Spero che aiuti gli altri.

sul aggiungere il codice di folloing:

HTML

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

CSS

Check Live: Live Demo

Spero che sarà di aiuto.

Answer 12

Il metodo più semplice che ho trovato era usare 'outline' invece di 'border'.

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

invece di

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

funziona meglio!

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

Answer 13

Nessuno ha parlato qui, ma la migliore e più semplice soluzione a questo a mio parere è quello di utilizzare "ombra" al posto di frontiera. La magia è sul valore "inserto" che consente di essere come un boarder.

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

è possibile compensare la X o Y per cambiare superiore/inferiore e utilizzare il valore -negativa per lati opposti.

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