懸停一個元素會影響另一個元素。不是兄弟姐妹也不是小孩

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/