0

リンクのリストがあり、タイトルが示すように、選択したリンクを除くすべてのリンクの不透明度を下げたいと考えています。したがって、All が選択されている場合、Links1、2、3 は淡色表示になります。Link1 が選択されている場合は、すべてのリンク、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ルールを宣言する順序を変更するだけです。

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

リンクが選択されたときに、追加のクラスを 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 に答える