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

时间:2011-10-27 22:46:18

标签: javascript jquery html5 css3

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

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

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

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

由于

1 个答案:

答案 0 :(得分:1)

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

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

希望这有帮助!

修改

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

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