ASP.NET/CSS - can't get a:active to work.

Question

i have a menu bar in my master page that is made up of 4 hyperlinks with background images that are being set using css. on hover-over, these images are swapped out, also by css. so each menu item (hyperlink) has two images, a static image and a hover-over image. when a user clicks one of the menu items and is taken to that page, i would like that hover-over image to "stick" for that page. here's my code:

<div id="nav">
    <asp:HyperLink ID="hlHome" runat="server" 
            NavigateUrl="~/Default.aspx" CssClass="menuHome" />
</div>

 #nav a, #nav a:visited
{
    height:39px;
    border:none;
    padding:0;
    display:block;
    cursor:pointer;
}

a.menuHome, a.menuHome:visited
{
    width:76px;
    height:39px;
    background:url('home.gif');
}

a.menuHome:hover, a.menuHome:active
{
    width:76px;
    height:39px;
    background:url('home_hover.gif') no-repeat;
}

my hyperlinks background images are rendering, the mouse-over effect works too, i just can't get the mouse-over image to "stick"/stay active. any help?

Answer 1

One option, (and I feel there are sure to be better ones) would be to have an additional class, maybe activepage and then add this class to the active menu item on each page. You could try doing it dynamically on Page Load. This activepage class could have a css entry that includes background:url('home_hover.gif') no-repeat;

Just in case you weren't aware, multiple class identifiers can be set on a single html element by separating with a space eg: <a href="foo.html" class="activepage menuHome">