Borde deslizante de CSS sin imagen de dimensionamiento

Me gustaría preguntar qué he hecho mal en mi función de desplazamiento del cursor hacia abajo sin cambiar el tamaño de la imagen. He seguido la guía que se proporciona aquí debajo del borde interno, pero aún así mi enlace cuando cierro la imagen sigue siendo el tamaño.

.navbar-div a img, .navbar-div a { border: none; overflow: hidden; float: left; } .navbar-div a:hover { border-bottom: 5px solid black; } .navbar-div a:hover img { margin: -5px; 

Aquí está mi enlace JSFiddle .

Gracias

Usted tiene una restricción sobre la altura total del contenedor para el anclaje que contiene la imagen. Cuando agrega el borde, agrega 5 píxeles a la altura del contenedor, lo que reducirá la imagen, ya que mantiene su relación de aspecto para llenar la altura más pequeña disponible. Como los márgenes no se tienen en cuenta al calcular el tamaño del contenedor, este cambia de tamaño. Lo cambié para cambiar el tamaño del relleno aquí .

 .navbar-div a:hover { border-bottom: 5px solid black; padding-bottom: 5px; } 

Puede considerar intentar un enfoque diferente y menos complicado. Como siempre sabrá el color de fondo, puede hacer que el borde sea invisible, pero siempre allí simplemente cambiando el color como se ve aquí .

Puede usar :after pseudo-elemento. Código:

 .navbar-div a:hover:after { content:"\a0"; display:block; padding:2px 0; line-height:1px; border-bottom:2px solid #000; } 

http://jsfiddle.net/w4zvad1x/

Debes cambiar el

 .navbar-div a:hover img { margin: -5px; } 

Lo que está haciendo es reducir el espacio dentro del DIV, por lo que la imagen se reducirá también.