删除不需要的悬停效果

Question

我目前有一个用CSS编写的悬停效果：

h2:hover{
     background-color: #FFE4B5;
     border-bottom: 1px solid #888;
     border-top: 1px solid #888;
     cursor: pointer;
}

但是我注意到当我将每个菜单选项悬停时，文本会略微向上然后向下移动。我没有添加会导致这种情况的任何内容？我不认为......我怎么能解决这个问题并让它们在悬停时留在原地？

JSfiddle here

Answer 1

正在添加和删除导致此问题的边界。

两个选项：向项目添加box-sizing: border-box或为非悬停元素添加透明边框。

示例框大小调整：

h2 {
  box-sizing: border-box;
}

示例边框：

h2 {
  border-top: transparent 1px solid;
  border-bottom: transparent 1px solid;
}

Answer 2

此动作来自悬停时添加和删除的边框。一个简单的解决方法是在h2元素没有被悬停时为其提供相同宽度的透明边框：

h2{
     border-bottom: 1px solid transparent;
     border-top: 1px solid transparent;
}