jQuery将鼠标悬停在图像的一部分上

我有一个图像和一个跨度重叠的图像。当我将鼠标悬停在图像上时，跨度会弹出，当鼠标悬停时，跨度会后退。
这里是一个简化的演示：
问题是：

---

我希望仅当跨距区域被鼠标移到上方时，跨距才会弹出，而不是图像。我尝试了一个

.hide（）

效果，但没有成功（在演示中被注释掉）。我认为这是因为一旦跨距被隐藏，它就不能再被鼠标移动了。实现此效果的正确方法是什么？

一种可能的解决方案：将切换范围放在另一个透明且大小为图像一半的范围内，并将事件附加到该范围上

另一个：将鼠标悬停绑定到图像，但检查鼠标是否位于图像的下半部分

---

我会推荐第一个。

第一个解决方案很聪明，但它看起来像是一个创可贴解决方案。我想知道是否有一种不使用css的方法，我认为这是最好的方法。它只需要一个额外的容器，但我认为它是向前的。