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?
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/