使用css和jquery创建一个；“地图”；带悬停效果（滚动：上、右、下、左）

我希望能够有锚链接（上，右上，右下，右下，左下，左下，左上），悬停或鼠标输入，滚动到各自的位置。我需要锚定标签的位置绝对，使他们永远不会移动时，实际的地图滚动

但无论如何，这是我试图创造的基本理念

编辑：现在我想起来了，使用锚定标签可能会被取消 我错了。此时，贴图需要具有更高的z索引值 锚定标记本身，因为地图上会有需要单击的内容。我现在摆弄小提琴的方式 其实我错了

功能应该是逐渐“轻松”移动。出发 从中间开始（缓慢移动），然后再向上移动（快速移动）。我 想象一下使用mouseEnter和mouseLeav以及页面x和y坐标 答案是，我这样想而不是 使用锚定标记方法

---

以下是更新后的fiddle:

锚定标记链接到它们自己，以便当您单击它们时，浏览器尝试将标记滚动到帧的顶部。您可以使用脚本来防止这种默认行为，或者更改链接的目标。

我继续并更新了fiddle，在achor标记中使用“javascript void”。。。但是我意识到使用achor标签可能是错误的。看看我在帖子上的编辑，像这样的吗？这是一个很好的解决方案，非常适合在地图顶部使用锚定标签z-index'd。我对这个问题进行了快速编辑，因为我意识到在地图顶部使用锚定标记是个坏主意（因为地图上会有可以单击的内容），如果我在顶部使用锚定标记方法z-index'd，这些锚定标记将妨碍我的内容。我们是否可以使用另一种方法，例如“mouseEnter/mouseLeave”和“x和y”坐标在#视口本身上实现相同的结果？您不能使用一系列div或span来代替链接吗？显然，我只做了示例中的上/下/左/右方向，但其他方向都很简单。如果你想让我把这个作为一个答案，让我知道。实际上，现在我想起来了，你可以在链接上使用preventDefault来停止它们的正常操作。不，还没有。本质上，使用div或span与使用锚定标记是一样的，因为它会在地图顶部创建一个“块”空间，并且会妨碍位于地图顶部的内容。将这个更新的fiddle作为问题的一个例子：，更好的方法似乎是让js代码通过x和y鼠标定位与#viewport交互，而不是使用锚定标记、跨距或div作为钩子（这是我的猜测）。那么具有宽度和高度但没有内部内容的div（或跨距）呢？