title: CSS Puzzle - Classed Link Span won't change color on hover
body: <p>I have some CSS that allows my menu items to load one after the other.  Each link is located within a nice span.  On the cover page, the span is black and on hover turns a rich blue.  On the other pages, the links are grey but the hover isn't working.  No color change.</p>
  
  <p>The hover code wasn't touched with the exception of the introduction of a class, so I'm not sure why it isn't working.   the codes are:</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;!-- navigation --&gt;
  
      &lt;nav id="navpage"&gt;
  
      &lt;a href="index.html"&gt;&lt;img class="logo" src="img/logo.png" alt="ALT" width="130" height="130" /&gt;&lt;/a&gt;
      &lt;ul class="navpage-links"&gt;
         &lt;li class="navpage-link work"&gt;&lt;a href="portfolio.html"&gt;My Work&lt;/a&gt;&lt;/li&gt;
         &lt;li class="navpage-link about"&gt;&lt;a href="about.html"&gt;About Me&lt;/a&gt;&lt;/li&gt;
         &lt;li class="navpage-link contact"&gt;&lt;a href="contact.html"&gt;Contact Me&lt;/a&gt;&lt;/li&gt;
         &lt;li class="navpage-link blog"&gt;&lt;a href="Link"&gt;The Blog&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
  
      &lt;/nav&gt;
  &lt;!-- close navigation --&gt;
  </code></pre>
  
  <p>The Original CSS that is working on hover:</p>
  
  <pre><code>.nav-link a, .nav-link span.link-placeholder {
      display: block;
      color: rgba(255, 255, 255, 0.95);
      background: rgba(0, 0, 0, 0.85);
      line-height: 30px;
      padding: 0 5px;
      font-size: 9px;
      text-transform: uppercase;
      letter-spacing: 0.11em;
      -webkit-transition: background 0.3s ease;
      -moz-transition: background 0.3s ease;
      -ms-transition: background 0.3s ease;
      -o-transition: background 0.3s ease;
      transition: background 0.3s ease;
  }
  
  .nav-link.about a.hover {
      background-color: #0089d2;
  }
  </code></pre>
  
  <p>The Applicable CSS that ISN"T working:</p>
  
  <pre><code>.navpage-link a, .navpage-link span.link-placeholder {
      display: block;
      color: rgba(255, 255, 255, 1.5);
      background: rgba(102, 102, 102, 0.4);
      line-height: 30px;
      padding: 0 5px;
      font-size: 9px;
      text-transform: uppercase;
      letter-spacing: 0.11em;
      -webkit-transition: background 0.3s ease;
      -moz-transition: background 0.3s ease;
      -ms-transition: background 0.3s ease;
      -o-transition: background 0.3s ease;
      transition: background 0.3s ease;
  }
  
  .navpage-link.about a.hover {
      background-color: #0089d2;
  }
  </code></pre>
  
  <p>As you can see I didn't change the code except for the adjustment for the class... what did I miss?</p>