Active State Image Display

I have some images that need to change, based not only on hover, but also on active state.

If you look at the page here: http://site427.mysite4now.net/tazthedog/site1/ There are some tabs with Screen Printing Quick Links, etc. The tab image is associated with the link and displays properly. The icon in tabs defaults to th开发者_如何学编程e gray and turns blue on mouse over, however, I also need it to be blue on the "active" state.

Here is the css:

.quick-links em:hover { background: transparent url(../images/quick-links.png)10px 9px no-repeat; 
display: block; 
float: left;}

Here is the html:

 <ul class="tabs">
    <li class="quick-links">
      <a href="#quickLinks" id="">
         <em>
            <span>Screen Printing Quick Links</span>
         </em>
      </a>
    </li>
    <li class="distributor-ql">
       <a href="#distributorQL" id="">
          <em>
             <span>Dealer &amp; Distributor Quick Links</span>
          </em>
       </a>
     </li>
 </ul>

I tried adding a .quick-links em:active... but that doesn't maintain it. I know there is a way to keep the icon blue while in the active state, I just need a little help to understand what that is.

Thanks!

You want to change the state of the <em> while the surrounding links are active? Then use the right selector:

.quick-links a:active em {/* your declaration */}

Use the same for hover, especially if you want to keep backward-compatibility for IE6. And change your markup to remove the <span> and <em> if this is your actual code.