CODEWITHSUNDEEP
javascriptjqueryhtmlcss
AnApprentice
AnApprentice

Reputation: 110960

How to position a hover div based on the position of the element

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

Upvotes: 1

Views: 3962

Answers (1)

Joey
Joey

Reputation: 1676

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.

Upvotes: 1

Related Questions