悬停一个元素会影响另一个元素。不是兄弟姐妹也不是小孩

Question

我目前正在为大学做一个实验性的网页，我遇到了一个大量烧脑的简单问题。这个想法是，你不必点击任何东西来浏览网站，给用户一个非常流畅，轻松的体验。

嗯，我有这个清单，它的每个项目必须触发一个div来，并很好。我正在试验CSS3的兄弟选择符tilde，并且在调用li时让div有一个left：0。唯一的问题是simbling选择器只在对象没有它自己的父对象时才起作用。我试过把它称为“＃父元素＃子元素：悬停〜＃父元素2＃子元素2”，但它完全忽略了我，就像我是某种白痴一样。

这里的headburner的简化版本的链接：http://jsfiddle.net/GuiHarrison/rDnYE/

那么你觉得什么，现在可好？我应该闭嘴并尝试jQuery（如果是这样，怎么做？），或者真的有办法在CSS中？

Answer 1

你可以在做标记了一些变化下面给出实现这一目标：

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; } 

观看演示在这里： http://jsfiddle.net/rathoreahsan/gew5B/