如果選擇了鏈接，請關閉其他鏈接的不透明度

Question

我有一個鏈接列表，標題說我想降低除選定鏈接之外的所有鏈接的不透明度。所以如果All被選中，Links1,2,3應該變暗。如果選擇鏈接1，鏈接全部，鏈接2,3應該變暗。

<nav class="primary"> 
     <ul> 
     <li><a href="#" class="selected">All</a></li> 
     <li><a href="#">Link1</a></li> 
     <li><a href="#">Link2</a></li> 
     <li><a href="#">Link3</a></li> 
     </ul> 
</nav> 

CSS

nav.primary ul li a.selected { 
    color:#e2e2e2; 
    border-bottom: 1px solid #004672; 
} 

這是我腦子裏想的，雖然它不工作，因爲這是不正確的（我想這將降低所選擇的一個的不透明度，太）：

nav.primary ul li a.selected > nav.primary ul li a { 
     opacity:0.5; 
} 

Answer 1

修訂

只要改變你聲明的順序在CSS規則：

nav.primary ul li a { 
    opacity:0.5; 
} 
nav.primary ul li a.selected { 
    color:#000; 
    border-bottom: 1px solid #004672; 
    opacity:1; 
} 

我已經改變了選擇鏈接的顏色，也增加了一些jQuery，但就是讓你能夠看到它的工作。你需要的只是CSS位。

例子：http://jsfiddle.net/Cx3ww/1/

Answer 2

小提琴：http://jsfiddle.net/h5aHg/

可以使用rgba色彩值，而不是不透明度：

nav.primary ul li, 
nav.primary ul li a { 
    color: rgba(210, 210, 210, .5); 
} 

nav.primary ul li a.selected { 
    color: rgba(210, 210, 210, 1); 
} 

Answer 3

嘗試在一個鏈接中選擇

增加一個額外的類的UL

<nav class="primary"> 
     <ul class="selectedList"> 
     <li><a href="#" class="selected">All</a></li> 
     <li><a href="#">Link1</a></li> 
     <li><a href="#">Link2</a></li> 
     <li><a href="#">Link3</a></li> 
     </ul> 
</nav> 

css：

nav.primary ul.selectedList li a { 
    opacity:0.5; 
} 
nav.primary ul.selectedList li a.selected { 
    color:#e2e2e2; 
    border-bottom: 1px solid #004672; 
    opacity: 1; 
} 

Answer 4

Here is a codepen with what you want to achieve, css only no Javascript