问如何仅当元素悬停在AngularJS中时才分配变量？

EN

我有一堆可以悬停的div。

<div ng-controller="HoverController as hover">
  <div class="hoverable" data-number="1"></div>
  <div class="hoverable" data-number="2"></div>
  <div class="hoverable" data-number="3"></div>
</div>

我想做的是，当悬停每个数据div时，将hover.hoveredNumber的值设置为悬停的元素的.hoverable -number属性。

还必须有一个条件，即没有元素悬停，并且hover.hoveredNumber的值为0。

我考虑过使用ng-mouseover和ng-mouseleave为每个可悬停的div手动触发mouseover和mouseleave事件，并从中确定悬停的元素。

我的问题是，每个可悬停的div在CSS中也有一个:hover样式。我知道:hover是非常可靠的，但我不相信两个单独的鼠标检测事件是可靠的，特别是当用户移动光标非常快并且其中一个事件丢失时。

我预计，在hover.hoveredNumber中反映的元素和当前显示其:hovered样式的元素之间有时会有一些差异。可悬停的div在某些情况下也非常接近和重叠，我担心一个div的mouseover事件可能会在另一个div的mouseleave事件之前触发，从而导致差异。

如何保证悬停在哪个元素上的准确性？