CSS悬停边框，不调整图像大小 [英] CSS Hover border without re sizing image

问题描述

我想问我在我的悬停边框下方功能做了什么错误，而不调整图像大小？我已遵循此处的指南

I would like to ask what have I done wrong on my hover border-below function without re sizing the image? I have followed the guide given here under inner border but still my link when I hover the image still re size.

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

这里是我的 JSFiddle 链接。

谢谢

推荐答案

您对包含图像的锚点的容器的总高度有约束。添加边框时，您将向容器的高度添加5px，这将缩小图像，因为它保持其宽高比以填充较小的可用高度。由于在计算容器大小时不考虑边距，因此它正在改变大小。我将其更改为更改填充大小，此处。

You have a constraint on the total height of the container for the anchor containing the image. When you add the border you are adding 5px to the height of the container, which will shrink the image since it is maintaining its aspect ratio to fill the smaller available height. Since margins are not considered when calculating the size of the container it is changing size. I changed it to change the size of the padding instead here.

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

您可以考虑尝试一种不太复杂的方法。因为你总是知道你的背景颜色，你可以使边框不可见，但总是在那里只是改变颜色，如看到这里。

You may consider trying a different, less complicated approach. Since you will always know your background color you could make the border invisible but always there by just changing the color as seen here.

这篇关于CSS悬停边框，不调整图像大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！