Active State Image Display

Question

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 the 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!

Answer 1

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.