Add hover image (CSS) to ASP.NET link button in a DataPager

Question

I add hover images to .Net LinkButtons using the following method:

.rollover a 
{
  background-image:url(/images/shoppingcart/butpill_continue.gif);
}

.rollover a:hover 
{
  background-image:url(/images/shoppingcart/butpill_continue_over.gif);
}

<div class="rollover">
<asp:LinkButton ID="btnContinue" runat="server"></asp:LinkButton>
</div>

This works fine with regular link buttons.

I need to add this to my next/previous buttons in a DataPager. I tried setting the ButtonType to "Link" and applying the ButtonCssClass="rollover" but this doesn't work. Is there a way to accomplish this?

Answer 1

Try changing your css to

a.rollover { background-image:url(/images/shoppingcart/butpill_continue.gif); }

a.rollover:hover { background-image:url(/images/shoppingcart/butpill_continue_over.gif); }

Or just

.rollover { background-image:url(/images/shoppingcart/butpill_continue.gif); }

.rollover:hover { background-image:url(/images/shoppingcart/butpill_continue_over.gif); }

You'll also have to change your other images to something like this

<asp:LinkButton ID="btnContinue" runat="server" CssClass="rollover" />