html - 悬停带有边框属性的元素会被移动

Question

当悬停一个 li 元素时，我想在底部和顶部添加一个边框。代码如下所示：

#overview li:hover {
    background: rgb(31, 31, 31);
    border-top: 1px solid white;
    border-bottom: 1px solid white;
}

http://jsfiddle.net/rwDYR/（将导航悬停在左侧）

问题是，它将 li 元素移动 1 或 2 个像素。我已经尝试margin-top: -1px为悬停状态添加一个，但这并不能解决问题。

任何的想法？

Answer 1

当您不悬停时添加透明边框<li>（并且仅更改边框的颜色:hover）

#overview li {
   padding: 5px;
   border-top: 1px solid transparent;
   border-bottom: 1px solid transparent;
}

#overview li:hover {
   border-color: #fff;
   /* other style ... */
}

（在你的小提琴上进行了即时测试，看起来效果很好）

Answer 2

那是因为您在li悬停时添加了边框。有多种解决方案。一种是将填充减少 1 个像素以补偿添加的边框。

http://jsfiddle.net/rwDYR/1/

Answer 3

我建议尝试从一开始就添加 1px 的上边距，并在悬停时将上边距设置为 0，以补偿 1px 的上边框。您也可以通过更改填充（而不是边距）来做到这一点

Answer 4

根据浏览器支持的级别，您可以使用 cssbox-sizing属性

https://developer.mozilla.org/en-US/docs/CSS/box-sizing

#overview li {
    box-sizing: border-box;
}

Answer 5

更新 http://jsfiddle.net/rwDYR/5/

或使用相同的背景颜色作为边框

#overview li {

padding: 5px;     
border-top:solid 1px rgb(24, 53, 82);
border-bottom:solid 1px rgb(24, 53, 82); 

}