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

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" wh开发者_运维知识库en a user hovers on the CommandField.

How do I do it?

Thanks.

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.