删除不需要的悬停效果[重复]答案

【问题标题】：Remove unwanted hover effect [duplicate]删除不需要的悬停效果[重复]
【发布时间】：2015-06-18 05:14:07
【问题描述】：

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

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

但我注意到，当我将每个菜单选项悬停时，文本会稍微上下移动。我没有添加任何会导致这种情况的东西？我不认为.. 我怎样才能解决这个问题并让它们在悬停时保持原位？

【问题讨论】：

【解决方案1】：

这是导致此问题的添加和删除的边框。

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

盒子尺寸示例：

h2 {
  box-sizing: border-box;
}

示例边框：

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

【讨论】：

【解决方案2】：

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

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

【讨论】：