CODEWITHSUNDEEP
csshyperlinkopacityselected
Tasos
Tasos

Reputation: 1642

If link is selected, turn opacity down for rest of links

I have a list of links, and as the title says I want to lower the opacity of all the links except the selected one. So if All is selected, Links1,2,3 should dim. If Link1 is selected, links All,Link2,3 should dim.

<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;
}

This is what I had in mind, although it doesn't work since it's incorrect(and I suppose it would lower the opacity of the selected one, too):

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

Upvotes: 0

Views: 138

Answers (4)

emerson.marini
emerson.marini

Reputation: 9348

UPDATED

Just change the order you declare the CSS rules:

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

I've changed the selected link color and also added some jQuery, but just for you to be able to see it working. What you need is just the CSS bits.

Example: http://jsfiddle.net/Cx3ww/1/

Upvotes: 1

Alex
Alex

Reputation: 283

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

Upvotes: 1

Ahmed
Ahmed

Reputation: 45

Try adding an additional class to your ul when a link is selected 

<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;
}

Upvotes: 0

Nicklas Nygren
Nicklas Nygren

Reputation: 2605

Fiddle: http://jsfiddle.net/h5aHg/

You can use rgba color values instead of opacity:

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);
}

Upvotes: 0

Related Questions