html - 悬停具有 border 属性的元素会移动

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 ... */
}

(在你的 fiddle 上进行了即时测试，它似乎工作正常)