0

我有一个链接列表，正如标题所说，我想降低除所选链接之外的所有链接的不透明度。因此，如果选择 All，Links1,2,3 应该变暗。如果选择 Link1，则链接 All、Link2、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;
}
4

4 回答 4

1

这是一个你想要实现的代码笔，只有 css 没有 Javascript

于 2013-08-21T09:25:28.703 回答
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/

于 2013-08-21T09:06:13.213 回答
0

小提琴：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);
}
于 2013-08-21T09:08:54.153 回答
0

选择链接后，尝试向您的 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;
}
于 2013-08-21T09:15:44.583 回答