javascript - 删除不需要的悬停效果

<分区>

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

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

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

最佳答案

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

两种选择:向元素添加 box-sizing: border-box 或向非悬停元素添加透明边框。

示例框大小:

h2 {
  box-sizing: border-box;
}

示例边框:

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

关于javascript - 删除不需要的悬停效果，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30902461/

相关文章：

javascript - 如何更流畅地移动固定元素？