treehouse : what would you like to learn today?
Web Design Web Development iOS Development

[Solved] css links with transparent text. Hover change to 100% doesn't work.

  • Hi there, I am trying to have my links begin as #fff with a 50% transparency. This works. But when I try to style the a:hover to be #fff 100% it isn't working. The hover seems to keep the 50% transparency setting from the "ul"

    I've tried a few things, to no avail, but let's see if you have an answer for me.

    here is my css -- let me know if I am stepping beyond the possibility of this working without javascript.

    
    #nava ul {
      width: 200px;
      margin: 248px 0 0 178px;
      padding: 0;
      font-weight: bold;
      list-style-type: none;
      text-decoration: none;
      color: #fff;
      opacity: 0.5;
      filter:alpha (opactiy=50); /*for IE8 and earlier*/
      background: transparent;
      position: absolute;
      z-index: 4;
    }
    
    #nava ul li {
      display: block;
      padding: 0;
      margin: 0;
      color: #fff;
      opacity: 1.0;
      filter:alpha (opactiy=100);/*for IE8 and earlier*/
    
    }
    
    #nava ul li a {
      color: #fff; 
      text-decoration: none;
      list-style-type: none;
    }
    
    #nava a:hover {
      color: #fff;
      list-style-type: none;
      text-decoration: none;
      opacity: 1.0;
      filter:alpha (opactiy=100); /*for IE8 and earlier*/
      background: transparent;
    }
    
    #nava li a#current {
      color: #fff; 
      list-style-type: none;
      text-decoration: none;
      opacity: 1.0;
      filter:alpha (opactiy=100); /*for IE8 and earlier*/
    }
    
  • This looks wrong

    
    #nava li a#current
    

    is that meant to be

    #nava li a.current

    ?

  • It's because the anchor tag is nested within the ul, therefore, it inherits the opacity, regardless...

    you need to move the opacity from the "#nava ul" selector to the "#nava ul li" selector, then you can set the opacity to 100% on the "#nava ul li:hover" state...rather than the "#nava ul li a:hover" state

    See this: http://codepen.io/DesignNinjaNet/pen/iwzdg

    and you should as @Paulie_D suggested change current from an ID to a class...

  • Thank you so much you two. I have fixed the ul and is working except for the .current and/or #current it's not holding the 100% #fff. I've rested it for a bit and will jump back on soon with a fresh eye. And then I just have to apply this to my regular non-ul navagation and I am good to go till the next hurdle comes my way. thanks again !