El borde desplegable de CSS hace que los elementos en línea se ajusten un poco

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?

Hice un JS Fiddle aquí .

Puede agregar un borde transparente al estado sin desplazamiento para evitar el “salto” cuando aparece el borde:

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

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

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

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

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

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

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

Intenta usar una statement como

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

en lugar de tu

 border:1px solid #102447; 

en su estado de vuelo estacionario

A continuación se muestra una demostración rápida de esto en acción:

MANIFESTACIÓN

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

Puedes usar la sombra de caja que no cambia el tamaño de tu casilla, a diferencia de los bordes.

Aquí hay un pequeño tutorial.

Simplemente agregue el siguiente código en su archivo css

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

El atributo CSS “tamaño de caja” me solucionó este problema. Si le das tu elemento

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

Luego, el ancho del borde se agrega al interior del cuadro cuando el navegador calcula su ancho. 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 nueva tecnología, pero el soporte para border-box es bastante consistente . ¡Aquí hay una demostración !

Después de tomar una presión prolongada, encontré una solución genial. Espero que ayude a otros.

en el agregar el siguiente 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; } 

Ver en vivo: demostración en vivo

Espero que ayude

Agregue un margen negativo en el vuelo estacionario para compensar:

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

violín actualizado

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

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

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

Aquí está el 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; } 

La definición hover 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 utilizado para hacer que los elementos que contienen cambien, siempre que pase el mouse sobre connectionsListItem. La solución fue agregada al CSS como:

 .connectionsListItem { border:1px solid transparent; } 

Use: antes para crear el borde, de esa manera no modificará el contenido real y le dará más libertad. Compruébelo aquí: 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; } } }

Nadie lo mencionó aquí, pero la mejor y más simple solución para esto en mi opinión es usar “sombra de caja” en lugar de bordes. 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 usar 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; } 
 
Button