asp.netgridviewonmouseovercommandfield

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" when a user hovers on the CommandField.
How do I do it?

Thanks.

Solution

  • 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.