如何根据元素的位置定位悬停div

Question

请参阅以下jsfiddle：http://jsfiddle.net/bhellman1/Na3hd/11/

现在，当您移动框时，悬停框会出现在所有项目的相同位置。

我想要做的是根据您被鼠标悬挂的＃box.corner定位悬停框。如果＃box.corner位于框的左侧，我希望框内左侧的悬停框居中于角落....如果您将鼠标悬停在底部的＃box.corner上是的，我希望悬停框显示在右下方，居中于角落。

关于如何实现这一目标的任何想法？

由于

Answer 1

如果我正确地阅读了您的问题，这应该是您正在寻找的内容：http://jsfiddle.net/Na3hd/17/

正如您所看到的，我移动了一些css以匹配不同元素的共同点，以便代码可以轻松地重用并分配给其他元素。我将hoverbox的定义移动到了mouseenter函数中，以便在每个mouseenter上创建一个新的div，这样在设置位置时就不会导致复杂化。

希望这有帮助！

修改

这是一种更具活力的方法：http://jsfiddle.net/Na3hd/22/

另外，我刚刚意识到你想让这些物品出现在盒子外面。