Link to home
Start Free TrialLog in
Avatar of rwone
rwone

asked on

how to enforce hover state div is shown above other elements and outside of container?

hello,

i am displaying a hidden div upon hovering over an image with a specified class.  

the problem is that the div is displaying 'underneath' other elements and not extending beyond the container it is within.  i have tried z-index and absolute/relative position combinations to resolve this but they have not worked.  

i was initially showing this div through css and am now trying to achieve this via jquery but the undesirable outcome is the same.  

the current jsfiddle for this is here:  

http://jsfiddle.net/rwone/eeaAr/

i have found two solutions to remedy this issue (displayed in the comments of the css), but they cannot be implemented as they effect other required functionality and display.  

thank you.
Avatar of Chris Stanyon
Chris Stanyon
Flag of United Kingdom of Great Britain and Northern Ireland image

OK. A couple of pointer. Both DIVS show and hide because this line:

$('.hidden_db_data_div').fadeIn(500)

selects all DIVs with a class of hidden_db_data_div. What you need to do is search for the DIV with that class within the LI that's being hovered. so it should be:

$(this).find('.hidden_db_data_div').fadeIn(500)
and
$(this).find('.hidden_db_data_div').fadeOut(500)

The inconsistent fadein and fadeout is because when you mouse over the image, your DIV fades in. Once it's faded in, your mouse is now over the new DIV and therefore triggers the fade out, because it's no longer over the image. Once it fades out, it's back over the image and triggers the fade in, and on and on and on.

The only way to get the DIV to show over everything is to effectively take it out of the scrollable DIV. You can do this using absolute positioning, but you need to understand the way the positioning works. When you absolutely position something, it is positioned within the last element that had position:relative or position:absolute applied to it - in your case that's the LI, which is inside your scrollable DIV. If you remove position:relative from the LI and add it to the container_a DIV, then you will position your DIVs relative to that, which is outside the scrollable DIV. Because your DIVs are now positioned relative to the container DIV and not the LI, you may need a little extra jQuery work to set the position.

I've updated a fiddle to reflect some of these changes:
http://jsfiddle.net/eeaAr/19/
Avatar of rwone
rwone

ASKER

thank you.  

i understand all your points (apart from the absolute/relative positioning, but i just need to study that more so that i grasp the concept).  thank you.  

i've made a few attempts to create the desired effect but haven't quite got it, the updated fiddle with commented remaining issue is here:

http://jsfiddle.net/rwone/eeaAr/

thank you.

edit: i've been re-reading your information about positioning, thank you.  when you say that applying absolute/relative positioning to an element positions it relative to the last element that had absolute/relative positioning defined, i am assuming you mean those elements that 'contain' it? eg: div id #two's positioning would effect div id #four's positioning however div id four's positioning would not be effected by div id #three's positioning?  
<div id="one">
<div id="two" style="position: absolute">
<div id="three" style="position: relative">
text
</div>
<div id="four" style="position: absolute">i want to control this portion of text</div>
</div>
</div>

Open in new window

ASKER CERTIFIED SOLUTION
Avatar of Chris Stanyon
Chris Stanyon
Flag of United Kingdom of Great Britain and Northern Ireland image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of rwone

ASKER

thank you very much! solved and then some, i've learned a lot through your explanations, thank you very much!
Avatar of rwone

ASKER

hello,

i have implemented this solution alongside isotope and it is raising some issues, i have started a new question here which details the situation and provides a working jsfiddle:

https://www.experts-exchange.com/questions/27935919/how-to-disable-jquery-isotope-js-default-positioning.html

thank you.