How to change Background image on hover of asp:CommandField in a Gridview
-
19-12-2020 - |
質問
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.
解決
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.
所属していません StackOverflow