Question

I’m trying to get a hidden div to display relative position (directly to the right of the hovered div.)

On the fiddle, when the cursor hovers over the div it enlarges and repositions. What I want to achieve but can’t figure out… is how to display the div details for ‘this’ element only, relative to the hovered div.

The problems I’m having are:

1. Getting the child div (.details) to be the only one to display not all of the .details elements.
   a. Getting it to display relative to the hovered element, not in an absolute position.
2. Cancelling the hover function on click, so that the div details can be navigated to without it disappearing.

Fiddle: http://jsfiddle.net/pssuT/1

Answer 1

To get the details absolutely positioned to the right of the containing element you can add position:relative to the parent and position:absolute; left:100% to the child.

To get the state to remain the same after a click, you can add a class on click and check for it in the hover functions.

See the solution: http://jsfiddle.net/pssuT/2/