Hover an element affects another. Not a sibling nor a child

Question

I'm currently doing an experimental page for college and I came upon a simple problem with a huge amount of brain burned. The idea is that you don't have to click in anything to navigate the site, giving you a very fluid, light experience to the user.

Well I've got this list that each of it's items have to trigger a div to come by and be nice. I was experimenting with CSS3's sibling selector tilde and make the div have a left:0 when the li is called. The only problem is the simbling selector only works if the object doesn't have a parent of it's own. I've tried calling it's hole family like "#father-element #child-element:hover ~ #father-element2 #child-element 2" but it ignores me completely like I'm some kind of idiot.

Here's the link of a simplified version of the headburner: http://jsfiddle.net/GuiHarrison/rDnYE/

So what do you think, guys? Should I shut up and try jQuery (if so, how?) or there really is a way in CSS?

Answer 1

You can achieve this by doing some change in mark-up given below:

HTML:

<ul>
    <li id="cinco">item1</li>
    <li id="seis">item2</li>
    <li id="sete">item3</li>
    <li id="oito">item4</li>

    // As you've defined these items' position as absolute so no matter if you define them as list items.
    <li id="e">
        <div>This should work now - cinco</div>
    </li>
    <li id="f">
        <div>This should work now - seis</div>
    </li>
    <li id="g">
        <div>This should work now - sete</div>
    </li>
    <li id="h">
        <div>This should work now - oito</div>
    </li>
</ul>

CSS:

    ul {margin-top:10px; position: relative}
    ul li#cinco:hover ~ #e,
    ul li#seis:hover ~ #f,
    ul li#sete:hover ~ #g,
    ul li#oito:hover ~ #h { left:300px; background-color:#BADA55; }

See the Demo here : http://jsfiddle.net/rathoreahsan/gew5B/