显示内联块悬停

Question

我正在使用display: inline-block;来保持一些div彼此相邻。我不知道为什么但是在悬停时div会向上移动。我认为它向上移动的数量与其非悬停形式（.title类元素）中元素的填充有关。这很奇怪，我无法弄清楚为什么会发生这种情况，因为所有值都在悬停形式中重置。

JSFiddle

注意我'使用Sass所以css可能看起来有点奇怪

Answer 1

.option {
  vertical-align:bottom;
}

因为您声明了元素inline，所以它们遵循与页面的所有流动内容相同的垂直对齐规则 - 排列居中。将它强制到整条线的固定位置并解决它。

Answer 2

将以上行添加到我想悬停的元素上可以帮助我解决此问题：

.example {
border: 10px solid transparent;
}

.example :hover{
border: 10px solid;
}