title: Image hover won't work using CSS background
body: <p>I'm trying to create a hover effect for an image with a link. The markup for it is:</p>
  
  <pre><code>&lt;a class="phoneNumber" href="#" title=""&gt;897698897&lt;/a&gt;
  </code></pre>
  
  <p>The image size is 174 x 72 and I wish to have the bottom half display when you hover over this image. My CSS doesn't work at all. Please could someone point out what I'm doing wrong?</p>
  
  <p>Many thanks in advance</p>
  
  <pre><code>.phoneNumber {
      background:  #101112 url("../img/phone.png") 0 0px no-repeat;
      height:      36px;
      width:       174px;
      display:     block;
      float:       right;
      margin:      0;
      padding:     26px; 0 0 0;
      text-indent: -9999px;
      position:    absolute;
      right:       0;
      z-index:     2
  }
  
  
  .phoneNumber a {
      background:  #101112 url("../img/phone.png") 0 0px  no-repeat;
      height:      36px;
      width:       174px;
      display:     block;
      float:       right;
      margin:      0;
      padding:     26px; 0 0 0;
      text-indent: -9999px;
      position:    absolute;
      right:       0;
      z-index:     2
  }
  
  .phoneNumber a:hover {
      background:  #101112 url("../img/phone.png") 0px -36px no-repeat;
      height:      36px;
      width:       174px;
      display:     block;
      float:       right;
      margin:      0;
      padding:     26px 0 0 0;
      text-indent: -9999px;
      position:    absolute;
      right:       0;
      z-index:     2
  }
  </code></pre>