title: CSS opacity and text problem
body: <p>is there a way I can stop the opacity from affecting my links text when the mouse pointer hovers over my link? I just want the opacity to affect the image only.</p>
  
  <p>Here is the CSS.</p>
  
  <pre><code>.email {
      background: url(../images/email.gif) 0px 0px no-repeat;
      margin: 0px 0px 0px 0px;
      text-indent: 20px;
      display: inline-block;
  }
  
  .email:hover {
      opacity: 0.8;
  }
  </code></pre>
  
  <p>Here is the xHTML.</p>
  
  <pre><code>&lt;a href="#" title="Email" class="email"&gt;Email&lt;/a&gt;
  </code></pre>