CSS改變兩個環節徘徊在其中一方時

我有以下的html：CSS改變兩個環節徘徊在其中一方時

<div id="main"> 
    <div id="home" class="section"> 
     <ul> 
      <li class="home_li"><a href="#home" class="goto_home">Home</a></li> 
      <li class="about_li"><a href="#about" class="goto_about">About us</a></li> 
      <li class="contact_li"><a href="#contact" class="goto_contact">Contact</a></li> 
     </ul> 
    </div> <!-- End home --> 

    <div id="nav"> 
     <ul> 
      <li class="home_li"><a href="#home" class="goto_home"></a></li> 
      <li class="about_li"><a href="#about" class="goto_about"></a></li> 
      <li class="contact_li"><a href="#contact" class="goto_contact">Contact</a></li> 
     </ul> 
    </div> <!-- End nav --> 
</div> <!-- End main -->

我試圖做的是改變兩個鏈接的狀態時，一個正在徘徊。例如，如果我將鼠標懸停在「約」下的<div id="home">下，我希望兩個鏈接（即<div id="nav">下的那個鏈接和一個鏈接）都以不透明的方式顯示。

我試圖遠離JS如果可能的話。到目前爲止，我對CSS的嘗試都是在相鄰的選擇器上進行的，但這對我來說是新的，所以我一直無法使其工作。

#home .about_li a:hover + #nav .about_li a { 
     opacity: .5; 
    }

這隻能用CSS來完成嗎？

編輯：

感謝您的答覆。我將如何更改相鄰選擇器的HTML工作？如果它不會嚴重影響網站的其他部分（現在的結構非常完整），我可以嘗試進行一些調整。

ANOTHER編輯：

好吧，我讀過一些更多關於這些選擇，現在我明白了。我認爲，由於他們都是兄弟姐妹，所以他們都是兄弟姐妹：P現在我明白了爲什麼它不起作用。我會看看我是否可以想出一個解決方法來僅使用CSS，並將在此處發佈。否則，我會用JS :(

來源

2011-07-12 brunn

你有什麼不工作，因爲你的CSS規則正在尋找#nav下的一個標籤，它是#home下另一個標籤的鄰居兄弟。我認爲你需要JS來做到這一點。 –

CSS真的不能做到這一點。即使徹底改變HTML是一種選擇，當您將鼠標懸停在第二個上時，您也無法更改第一個鏈接。投降jQuery！ – thirtydot

@brunn：http://jsfiddle.net/hweEr/4/ – Jawad

不幸的是，你的結構是單獨的CSS選擇器太複雜了去，因爲a元素是不是彼此的兄弟姐妹，但它是你的內在div S，等等。

它很容易與JavaScript庫如jQuery，否則你的運氣了。

來源

2011-07-12 18:28:33 BoltClock

沒有，如果你不打算改變HTML結構，或者您可以使用jQuery

來源

2011-07-12 18:30:28 AlexC

這不能用CSS來實現儘管我讚賞你的努力，以避免加載一堆JS，特別是重量級t庫。

來源

2011-07-12 18:31:48 Josh

CSS改變兩個環節徘徊在其中一方時

回答

相關問題