css - 为什么我在悬停时变换内联元素，它会回到原来的位置？

Question

我尝试在鼠标悬停时转换元素，就像这样:

span{
  transition: transform 0.35s;
}
span:hover{
  transform: translateY(30px);
}   

<span>test</span>

在 IE 上，它运行良好，但在 Chrome 和 Firefox 上不正常。它会回到原来的位置。

我发现如果将 display:block 添加到 span 中，它会很好(在 Firefox 上也没有什么问题)，但为什么呢？有更好的方法吗？

Answer 1

我认为它返回到原始位置是因为它物理移动并且鼠标在翻译后不再悬停在元素上。

几个想法:

1) 如果您希望元素在鼠标悬停时保持移动但在鼠标离开时返回，也许您可​​以在 padding 而不是 translate，这样元素内容将移动，但 DOM 本身中的框将保留以保持 :hover 效果

2) 如果你希望元素停留在它的位置并且在悬停后不返回，你可能想使用 Javascript 在悬停后向元素添加一个类并为该类设置样式

祝你好运!