Active State Image Display
- by fmz
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 & 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!
