悬停伪类的双边框大小

Question

在我的导航栏上有两个带有圆形边框的导航链接，当它们悬停时，边框大小加倍。如果没有导航链接在悬停时移动并且悬停边框与原始边框的区域不匹配，我无法使其工作。我确定它与填充有关，但我已经尝试了我能想到的一切。请参阅示例代码 - http://jsfiddle.net/mGjs6/3/

Answer 1

您需要更改

#signup a:hover

到

#signup:hover

并删除width

#signup:hover {
    border: solid 2px #55971e;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
}

示例： http://jsfiddle.net/jasongennaro/mGjs6/6/

与#clientarea

相同

不匹配的问题是一个元素#signup有边框，但是你在悬停时改变了子元素（a）的边框。

修改

根据评论

  

然而，当您悬停时，文本仍会移动以调整   增加边界。文本需要保持固定，只有边框   变化

<击> 这是因为边界大小正在增加。这就是将文本推向像素（这是边框大小的增加）

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

示例2： http://jsfiddle.net/jasongennaro/mGjs6/9/

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

编辑3

我明白了：在悬停时将padding减少了一个像素并且一切正常

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

示例3： http://jsfiddle.net/jasongennaro/mGjs6/10/