¿Puedes hacer "un borde invisible"?

Question

Estoy tratando de make a navbar como ejercicio.

estoy usando a:hover para incluir un borde sólido alrededor del botón que se cernía. Sin embargo, esto hace que todos los demás botones se muevan por el tamaño del borde.

¿Cuál es la solución adecuada a este problema? Sé que hay otros (discutido here), específicamente traté de hacer que el borde "sea invisible pero ocupa espacio incluso cuando no está suspendido". Configuré border:transparent esperando que hiciera lo que quisiera, pero no mostraba espacio para tomar nada.

Sé que podría buscar a mano del color de la frontera para ser igual a un segundo plano y que sea sólida, pero esto no es lo que quiero. ¿Hay una forma sensata de resolver este problema?

Answer 1

¿Qué tal border: 10px solid transparent?

Answer 2

Su mejor opción sería agregar relleno o márgenes a su elemento que sea del mismo tamaño que el borde y hacer que el borde tenga ancho cero, y luego mostrar el borde y eliminar el relleno con el selector a:hover.

Aquí hay un ejemplo. A menudo puede hacer esto con márgenes también.

a { 
 
    display: inline-block; 
 
    height: 2em; width: 100px; 
 
    padding: 2px; 
 
    background: #0ff; 
 
} 
 

 
a:hover { 
 
    padding: 0; 
 
    border :2px solid #000; 
 
}

<a href="#">Hello World</a>

Answer 3

Usted puede utilizar la propiedad outline CSS en lugar de su frontera, que actúa como una frontera, pero no se tiene en cuenta en los cálculos de dimensionamiento.

Sin embargo, esto tiene algunos problemas, not being supported by IEs 7 or earlier.

Answer 4

border:transparent significa border: transparent 0 none

Si no se especifica una propiedad cuando se utiliza sintaxis abreviada a continuación, se restablece todas las propiedades a sus valores por defecto.

Necesitas darle un estilo de borde y un ancho de borde.

Answer 5

Una razón por la que esto no está funcionando como era de esperar es porque solo está aplicando en :hover, debe aplicarse al elemento sin el: selector de desplazamiento o obtendrá las dimensiones "cambiantes". No importa qué tipo de pantalla use, solo tiene que asegurarse de que sea la misma y, por defecto, <a> está en línea.

Otra razón tiene algo que ver con los bordes abreviados, debe agregar un tipo de borde para la versión transparente como solid en lugar de none.

La técnica que utiliza es totalmente legítimo, sin necesidad de cortes de relleno o contorno (que no añade dimensión).

http://jsfiddle.net/Madmartigan/kwdDB/

Prueba esto:

#wd-navbar li a { 
    border: medium solid transparent; 
    display: block; 
    margin: 1px; 
} 

#wd-navbar li a:hover { 
    background-color: #F5DEB3; 
    border: medium solid; 
} 

Answer 6

Configuración de color de borde: transparente; hace el trabajo.

a { 
    border-color : transparent ; 
} 

a:hover { 
    border-color : black; 
} 

Answer 7

elementos uso seudo ::after y ::before a ceate límites invisibles.