Css 悬停伪类上的双边框大小_Css

Css 悬停伪类上的双边框大小

css

Css 悬停伪类上的双边框大小,css,Css,在我的导航栏上有两个带圆形边框的导航链接，当它们悬停时，边框大小会加倍。如果导航链接在悬停状态下移动，并且悬停边界与原始边界的区域不匹配，我无法使其工作。我确信这和填充物有关，但我已经尝试了我能想到的一切。请参见示例代码-您需要更改注册a：悬停到注册：悬停并删除宽度例如：和Clientrea一样不匹配的问题是一个元素注册时有边框，但是您在悬停时更改了子元素a的边框编辑根据评论但是，当您悬停时，文本仍会移动以调整颜色增加边界。文本只需使用边框保持固定改变这是因为边框的大

在我的导航栏上有两个带圆形边框的导航链接，当它们悬停时，边框大小会加倍。如果导航链接在悬停状态下移动，并且悬停边界与原始边界的区域不匹配，我无法使其工作。我确信这和填充物有关，但我已经尝试了我能想到的一切。请参见示例代码-

您需要更改

注册a：悬停

到

并删除宽度

例如：

和Clientrea一样

不匹配的问题是一个元素注册时有边框，但是您在悬停时更改了子元素a的边框

编辑

根据评论

但是，当您悬停时，文本仍会移动以调整颜色增加边界。文本只需使用边框保持固定改变

这是因为边框的大小正在增加。这就是将文本向下推一个像素的原因，即边框大小的增加

你不可能完美地解决这个问题。最好更改边框或背景的颜色

例2：

将鼠标悬停在两者上方以查看建议

编辑3

我想出来了：在悬停时减少一个像素的填充，一切都会正常

#signup:hover {
    border: solid 2px #55971e;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    padding:3px 4px; //ADD THIS
}

例3：