How to change Background image on hover of asp:CommandField in a Gridview

Question

This is the code for CommandField with, background image.

<asp:CommandField DeleteImageUrl="~/cms_images/cancel.gif" ShowDeleteButton="true" ButtonType="Image" />

I would like to show this image "~/cms_images/cancel-hover.gif" when a user hovers on the CommandField.
How do I do it?

Thanks.

Answer 1

You can accomplish this with CSS. In the page markup you just need to declare a specific style for the command field - essentially this is the CSS style of the button:

<asp:CommandField ShowDeleteButton="true" ButtonType="Button" ControlStyle-CssClass="cancel" />

And in .css file define this style, and define how it changes when user hovers the element:

.cancel
{
    background-image: url(cms_images/cancel.gif);
}

.cancel:hover
{
    background-image: url(cms_images/cancel-hover.gif);
}

Note that in CSS you should provide a URL relative to the page location. In the code above I assume that the page is situated in the root folder of the web site.