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><a href="/fooA" class="fooa qtipmenu" id="foo_A"></a></li>
<li><a href="/fooB" class="foob qtipmenu" id="foo_B"></a></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><a href="/fooA" class="fooa qtipmenu active" id="foo_A"></a></li>
  <li><a href="/fooB" class="foob qtipmenu" id="foo_B"></a></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;
}