Setting active class for css sprites (image) menu - html

Question

I want to set an active class for a CSS image menu. I tried to set the active selector to be the same as the hover selector, but it didn't work.
CSS
#menu li a.fooa {
background-image: url(/images/foo_a.png);
height: 20px;
width: 20px;
}
#menu li a.foob {
background-image: url(/images/foo_b.png);
height: 20px;
width: 20px;
margin-left:-8px;
}
#topmenu li a:hover, #topmenu li a:active {
background-position: left bottom;
height: 20px;
width: 20px;
}
HTML
<ul id="foo_menu">
<li></li>
<li></li>
</ul>
(I have 2 classes for each href because I'm using the qtip2 popups. I've tried to set the active class without including the 2nd (qtip2) class, but haven't been able to get the active class to work that way either.)

Answer 1

the pseudo-selector :active doesn't set an element to active. It Selects the active link, which means only the time, when the mouse is clicked on the element until it's released!
What you need ist to apply an class="active" on your element:
When link #1 is active:
<ul id="foo_menu">
<li></li>
<li></li>
</ul>
And CSS changes to:
#topmenu li a:focus,
#topmenu li a:hover,
#topmenu li a.active {
background-position: left bottom;
height: 20px;
width: 20px;
}