Question

我想问一下，如果我没有重新调整图像尺寸，我在悬停边框下面的功能有什么问题？我已经按照内部边框下的here指南进行了操作，但当我将图像悬停在尺寸上时仍然是我的链接。

.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链接。

谢谢

Answer 1

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

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

您可以考虑尝试一种不同的，不那么复杂的方法。由于您始终可以知道您的背景颜色，因此您可以使边框不可见，但只需更改here所示的颜色即可。

Answer 2

您可以使用:after伪元素。代码：

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

http://jsfiddle.net/w4zvad1x/

Answer 3

您必须更改

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

它正在做的是缩小DIV中的空间，这样图像也会收缩。

CSS Hover边框无需重新调整图像大小

3 个答案: