Sun, 2013-03-10 20:45
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!
Mon, 2013-03-11 08:10
#1
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; }