无法使用过渡在悬停时移动文本

Question

当鼠标悬停在上面时，我试图使用过渡来移动一组文本上翻字。

.mod-title {
  background-color: red;
  margin-top: 50%;
  transition: margin-top 2s ease;
}

#business:hover .mod-title {
  margin-top: 25%;
}

<div id="business">

  <h2 class="mod-title">Hi</h2>

</div>

这就是我尝试过的，这是其背后的逻辑：

我有一个标题，最初希望保持在利润率最高的50％，但是当有人在业务div框上方时，我希望它过渡到利润率最高的25％。

所以我的CSS中也有这个，但是当我这样做时什么也没发生。我要去哪里错了？我不明白，代码感觉正确。请引导我。

Answer 1

一切正常。

悬停时，标题会根据CSS上升。

如果您认为标题应该停留在顶部，直到您将光标移至另一点，那么代码为 http://jsfiddle.net/xd2pzkgo