如何「鏈接」兩個相同導航欄的懸停效果

Question

我想要在網站上創建兩個相同的導航欄。我想要做的是在每個導航欄上「鏈接」:hover效果，這樣當NavBar1上的一個鏈接懸停時，不僅:hover效果會在NavBar1上顯示，而且同一個:hover效果應該同時顯示在相應的鏈接上NavBar2。

我已經設法通過在我的CSS中使用相鄰的兄弟組合器單向工作，但我的問題是我似乎無法讓它在相反的工作。換句話說，當將鼠標懸停在NavBar1上的Link1上時，:hover效果將顯示在NavBar1中的Link1和NavBar2中的Link1上。但是，當將鼠標懸停在NavBar2上的Link1上時，:hover效果僅在NavBar2中的Link1上顯示（因爲相鄰的兄弟組合器僅影響其後的元素，而不影響前一個元素）。

是否有可能實現我想在這裏做的事情？

看看我的意思是，如果我沒有解釋清楚：http://jsfiddle.net/9AbvE/697/

這不是我想要什麼。我需要每個導航欄位於不同的div中，但是我無法通過這樣做來實現效果。我把這些代碼放在一起，只是爲了讓讀者瞭解我想要完成的事情。

請注意選擇第一個鏈接列表中鏈接1與第二個鏈接之間的區別。我希望在來回移動時獲得同樣的效果，而不僅僅是單向（即選擇底部的「Link1」應該將兩個「Link1」的黑色都轉換爲黑色，就像選擇最上面那樣）。

Answer 1

你總是可以通過使用一個共同的父元素 「鏈接」 兩個假的吧：http://jsfiddle.net/jjordanca/TNeZU/

HTML：

<div id="navbar"> 
    <div id="linkone"> 
     <a class="one" href="#">Link1</a> 
     <a class="one" href="#">Link1</a> 
    </div> 
    <div id="linktwo"> 
     <a class="two" href="#">Link2</a> 
     <a class="two" href="#">Link2</a> 
    </div> 
    <div id="linkthree"> 
     <a class="three" href="#">Link3</a> 
     <a class="three" href="#">Link3</a> 
    </div> 
</div> 

CSS：

a { 
    text-decoration: none; 
    color: red; 
    margin-right: 20px; 
    padding: 0 10px; 
} 

#navbar { 
    border: 1px solid red; 
    width: 500px; 
    margin: 50px; 
    padding: 20px; 
    height: 100px; 
    position: relative; 
} 

#navbar div { 
    text-align: center; 
    width: 100px; 
} 

/* LINK 1 */ 

#linkone { 
    position: absolute; 
} 

.one + .one { 
    position: absolute; 
    top: 80px; 
    left: 0; 
} 

#linkone:hover { 
    color: #000; 
    background-color: #008800; 
} 

.one { 
    position: absolute; 
    left: 0; 
    color: inherit; 
    background-color: inherit; 
} 

/* LINK 2 */ 
#linktwo { 
    position: absolute; 
    left: 80px; 
} 

.two + .two { 
    position: absolute; 
    top: 80px; 
    left: 0; 
} 

#linktwo:hover { 
    color: #000; 
    background-color: #008800; 
} 

.two { 
    position: absolute; 
    left: 0; 
    color: inherit; 
    background-color: inherit; 
} 

/* LINK 3 */ 
#linkthree { 
    position: absolute; 
    left: 140px; 
} 

.three + .three { 
    position: absolute; 
    top: 80px; 
    left: 0; 
} 

#linkthree:hover { 
    color: #000; 
    background-color: #008800; 
} 

.three { 
    position: absolute; 
    left: 0; 
    color: inherit; 
    background-color: inherit; 
}