Hover an element and affect another with the same parent

Question

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!

@ExplosionPills unfortunately not, since I have other elements within `#two` and `#one` should be shown when only hovering `#three`. Thanks anyway! — Giorgio, Mar 10 '14 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, Mar 10 '14 at 13:44

score 1 · Accepted Answer · answered Mar 10 '14 at 13:46

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/

answered Mar 10 '14 at 13:46

Darko

38,310
15
80
107

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 Mar 10 '14 at 13:54

Hover an element and affect another with the same parent

1 Answers1