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 & 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.
精彩评论