0

I know it's a question asked tons of times, but I'm not able to find my answer.

I have a container with 2 divs

<div id="container">
    <div id="two">
        <div id="three">three, please hover me</div>
    </div>
    <div id="one">one</div>
</div>

where #one is shown outside the container with an absolute positioning, and #two is a container to let div #three to float right.

I would like to show #one when hovering #three. Basing on this answer, I have tried to add a + selector in my code, since #one is directly after the #two closing tag, but it doesn't work (fiddle).

You can change my structure if needed, the only things that I would like to keep are that #one is shown outside the container and #two is floated to right. If possible, I would like to avoid using jQuery scripts and keep everything in CSS. Thanks!

Improve this question
3
  • Is this acceptable: jsfiddle.net/jPKKY/1
    – Explosion Pills
    Commented Mar 10, 2014 at 13:40
  • @ExplosionPills unfortunately not, since I have other elements within #two and #one should be shown when only hovering #three. Thanks anyway!
    – Giorgio
    Commented Mar 10, 2014 at 13:43
  • I don't think you can do what you're asking then because there is no way to select ancestors in CSS
    – Explosion Pills
    Commented Mar 10, 2014 at 13:44

1 Answer 1

Reset to default
1

I've forked your fiddle and changed it around a little to do what you require. Let me know if that's what you're after. When I'm not at work and have a bit more time, I can explain what's happening.

The key is moving your div#one into the same container as the :hover

http://jsfiddle.net/bWb3Q/

EDIT: based on comments on question, updated fiddle: http://jsfiddle.net/bWb3Q/3/

Improve this answer
1
  • Yes, this does the trick! I didn't try this way because I thought that the overflow:hidden property would have hidden #one. Thanks!
    – Giorgio
    Commented Mar 10, 2014 at 13:54

Not the answer you're looking for? Browse other questions tagged or ask your own question.