asp.net - グリッドビューでasp：CommandFieldにカーソルを合わせて背景画像を変更する方法

Question

これは、背景画像を含むCommandFieldのコードです。

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

"~/cms_images/cancel-hover.gif"ユーザーがCommandFieldにカーソルを合わせたときに、この画像を表示したいと思います。
どうすればいいのですか？

ありがとう。

Answer 1

これはCSSで実現できます。ページマークアップでは、コマンドフィールドの特定のスタイルを宣言する必要があります。基本的に、これはボタンのCSSスタイルです。

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

そして、.cssファイルでこのスタイルを定義し、ユーザーが要素をホバーしたときにどのように変化するかを定義します。

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

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

CSSでは、ページの場所を基準にしたURLを指定する必要があることに注意してください。上記のコードでは、ページがWebサイトのルートフォルダーにあると想定しています。