title: a:hover color is not working
body: <p>a very strange thing..</p>
  
  <p>I want to change the text color and background color of the links when hovered.</p>
  
  <p>this is the code</p>
  
  <p>css:</p>
  
  <pre class="lang-css prettyprint-override"><code>#link-menu a
  {
      color:white;
      display:block;
      height:100%;
      width: 100%;
      text-decoration:none;
      text-align:center;
      line-height:45px;
      font-weight:bold;
      font-family:"trebuchet ms","comic sans ms";
      outline:none;
  }
  
  .link2 a:hover 
  {
      color:black;
      background:white;
  }
  </code></pre>
  
  <p>its not that the hover is not working. background color is changing but the text color is not changing.</p>
  
  <p>one more imortant fact is that if instead of using the class .link2 , i use an id, color also changes.
  The issue is with using class only.
  Can somebody please explain the reason and the solution?</p>
  
  <p>Note: i dont want to use the parent element id. because i dont want to change background of all links.</p>