ASP.NET/CSS - using an image for a HyperLink control that I need swapped on hover over.

Question

i have a HyperLink on my site that is displaying an image instead of text. what i would like is for it to swap to another image on mouse-over using css. so far, i've come up with this:

<asp:HyperLink ID="hlHome" runat="server" ImageUrl="~/images/home.gif"   
        NavigateUrl="~/Default.asp" CssClass="homeHover" />

my css:

.homeHover {  }
.homeHover:visited { background: url( ../images/home.gif ) no-repeat; }
.homeHover:Hover { background: url(../images/home_hover.gif) no-repeat; }

well, that does nothing. i don't know css well enough to figure this out. help please. also, i've been asked not to use javascript. i got it working using javascript but i need it to work using css. (or i suppose if i could get this to work programmatically would be okay too but... not sure about that. ) thanks.

Answer 1

Try this:

a.homeHover:visited { background: url( ../images/home.gif ) no-repeat; }
a.homeHover:hover { background: url(../images/home_hover.gif) no-repeat; }

The :<state> selector in CSS is what is known as a pseudoclass. Pseudoclasses are special selectors that can match an element based on things like behaviours or relative positions.