使用AngularJS在悬停时添加/删除/更改CSS类的问题

Question

我试图在悬停时显示此span标记（即CSS显示：内联），当鼠标离开时，我想隐藏它（即CSS显示：无）。我想用AngularJS指令做到这一点。

这是我的HTML代码段：

<span class="" ng-class="{show: hover, hide: !hover}" ng-init="hover = false" ng-mouseenter="hover = true" ng-mouseleave="hover = false">The text that I want to show/hide</span>

这是我的CSS：

.show{
  display: inline;
}
.hide{
  display: none;
}

出于某种原因，当我这样做时，没有任何反应。 span元素开始隐藏（这是正确的）但是当我将鼠标悬停在它上面时它仍然是隐藏的。有人知道我的代码有什么问题吗？任何帮助都会非常感激！