如何根据元素的位置定位悬停div [英] How to position a hover div based on the position of the element

问题描述

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

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

我想要做的是定位悬停箱基于哪个＃box.corner你被放置。如果＃box.corner在框的左边，我想要在左边的悬浮框，在框外，居中的角落....如果你鼠标在＃box.corner在底部

有关如何完成此任务的任何想法？

感谢

解决方案

如果我正确地阅读了你的问题， http://jsfiddle.net/Na3hd/17/

你可以看到我移动了一些css来匹配不同的元素有更多的共同点，以便代码可以很容易地重用和分配给其他元素。我将hoverbox的定义移动到mouseenter函数中，这样在每个鼠标器上创建一个新的 div ，这将不会导致设置位置时的复杂性。 p>

希望这会有帮助！

EDIT

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

此外，我才意识到你想让这些项目出现在框外。

Please see the following jsfiddle: http://jsfiddle.net/bhellman1/Na3hd/11/

Right now when you move over the box, the hoverbox appears in the same place for all items.

What I would like to do is position the hover box based on which #box.corner you are moused over. If the #box.corner is to the left of the box, I'd like the hover box in the left, outside the box, centered to the corner.... If you mouse over a #box.corner that's in the bottom right, I'd like the hover box to show at the bottom right, centered to the corner.

Any ideas on how to accomplish this?

Thanks

解决方案

If I read your question correctly, this should be what youre looking for: http://jsfiddle.net/Na3hd/17/

As you can see i moved around some of the css to match what different elements have in common more, so that the code can easily be reused and assigned to other elements. I moved the defining of the hoverbox into the mouseenter function, so that a new div gets created on each mouseenter, which will then not result in complication when setting the positions.

Hope this helps!

EDIT

Here a more dynamic approach: http://jsfiddle.net/Na3hd/22/

Also, i just realized you wanted to have these items show up outside of the boxes.

这篇关于如何根据元素的位置定位悬停div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！