El borde deslizante de CSS hace que los elementos en línea se ajusten ligeramente

Question

Tengo una lista desordenada completa o anclas. Tengo un evento CSS: Hover que agrega bordes a él, pero todos los anclajes a la izquierda se ajustan ligeramente cuando activo, porque agrega 1px al ancho y el ajuste automático. ¿Cómo me aseguro de que el posicionamiento sea absoluto?

He hecho un JS Fiddle here.

Answer 1

Agregue un margen de 1px y elimine ese margen al pasar el mouse, por lo que se reemplaza por el borde.

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

Answer 2

Usted puede agregar un borde transparente para el estado no estacionario para evitar el "nerviosismo" cuando aparezca la frontera:

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

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

Answer 3

También puede utilizar outline, que no afectará el ancho, es decir, no tendrá efecto de "salto". Sin embargo, desafortunadamente, no se puede redondear el contorno.

Answer 4

Yo también estaba enfrentando el mismo problema. ¡La solución mencionada por Wesley Murch funciona! es decir, agregar un borde transparente alrededor del elemento que se va a suspender.

Tuve un ul en el que: se agregó el control deslizante a cada li. Cada vez, me movía en cada elemento de la lista, los elementos contenidos dentro de li también se movían.

Este es el código correspondiente:

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

El defn vuelo estacionario en cada elemento de la 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; 

} 

El código anterior se utiliza para hacer el cont Los elementos de aining cambian, siempre que pase el mouse sobre connectionsListItem. La solución era esto, añadido a la css como:

.connectionsListItem 
{ 
    border:1px solid transparent; 
} 

Answer 5

Se puede utilizar una caja de sombra que no cambia su caja de tamaño, a diferencia de frontera.

Here is a little tutorial.

Answer 6

El CSS "box-sizing" attribute fijado este problema para mí. Si indica su elemento

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

A continuación, se añade el ancho del borde de la dentro de la caja cuando el navegador calcula su anchura. De esta forma, cuando enciende y apaga el estilo del borde, el tamaño del elemento no cambia (que es lo que causa el nerviosismo que observó).

Esta es una tecnología nueva, pero compatible con el cuadro is pretty consistent. ¡Aquí hay un demo!

Answer 7

Puede usar una sombra de cuadro, en lugar de un borde para este tipo de funcionalidad.

Esto funciona porque su sombra no "toma tamaño en el DOM", por lo que no afectará el posicionamiento, a diferencia de un borde.

Trate de usar una declaración como

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

en lugar de su

border:1px solid #102447; 

de su estado estacionario.

continuación se presenta una breve demostración de esto en acción:

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

añadir un margen negativo en vuelo estacionario para compensar:

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

updated fiddle

En el violín el margin: -1px; es un poco más complejo porque se superó un margin-right, pero aún así es solo cuestión de restar el espacio recién ocupado.

Answer 9

Uso: antes de crear el borde, de esa manera no modificará el contenido real y le dará más libertad. Échale un vistazo aquí: 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

Apenas añada el siguiente código en su archivo css

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

Answer 11

Después de tomar una presión desde hace mucho tiempo he encontrado una solución fresca. Espero que ayude a otros.

en el folloing añadir el código:

HTML

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

CSS

Comprobar vivo: Live Demo

Espero que ayude.

Answer 12

El método más fácil que encontré fue usar 'outline' en lugar de 'border'.

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

en lugar de

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

funciona mejor!

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

Answer 13

Nadie ha mencionado aquí, pero la mejor y solución más simple a esto en mi opinión es el uso de "caja de sombra" en lugar de las fronteras. La magia está en el valor de "inserción" que le permite ser como un huésped.

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

Puede compensar la X o la Y para cambiar la parte superior/inferior y utilizar el valor negativo para lados opuestos.

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