I have a page content which have text in it. underneath the content, there is a navigator bar, and I would like that whenever I Hover one of the element in the navigator, a div will open up just above the element I have just hovered on, and show some content.
I don't want the DIV that will pop-up to push any object on the page, I would like it to be, like up on all of the objects on the page.
here's a fiddle to demonstrate:
In the fiddle, I want that whenever I hover First, the first-feedback will be shown just above him.
This is pretty much my code, I have just used jQuery to calculate my desired width, but I just can't get the div to be above the div he should be above. I can't just calculate by my eye and say how many pixels because the website is pretty much dynamic, so I need a formula to calculate that for me every time.
If you have any code suggestion, such as relocating the feedback div, please feel free to edit the fiddle!
Thanks in advance!
I think this is close to what
I think this is close to what you want.
You will need to hide the first_feedback once it has content with display:none or something.
It would be best to use classes so you don't need to target each element.
<div id="first" class="hoverelement"> <div id="first_feedback" class="displayelement"></div> </div> <div id="second" class="hoverelement"> <div id="second_feedback" class="displayelement"></div> </div> ...
.displayelement{ display:none; } .hoverelement:hover .displayelement{ display:block; border:solid blue 3px; background:yellow; position:absolute; top:0; z-index:100; width:500px; height:300px; }