5

私は次のコードを持っていますが、うまくいかないようです:

<td align="center" style="padding-bottom:52.5px">
<asp:ImageButton CssClass="RightArrow" ID="Image2" runat="server"     ImageUrl="/_layouts/Right_GrayArrow.png"/>
</td>

ホバー時に画像を変更する CSS クラス:

.RightArrow:hover
{
background-image: url('/_Layouts/Right_GreenArrow.png') !important;
}

お知らせ下さい。ありがとう

4

3 に答える 3

7

私はこの方法を好みます：

<asp:ImageButton CssClass="RightArrow" ID="Image2" runat="server" ImageUrl="/_layouts/Right_GrayArrow.png" onmouseover="this.src='/_layouts/Right_GreenArrow.png'" onmouseout="this.src='/_layouts/Right_GrayArrow.png'"/>

さよなら

于 2013-11-24T19:13:04.310 に答える
6

コントロールは、プロパティが次のような属性になる要素ImageButtonとしてレンダリングされます。<input type="image" />ImageUrlsrc

<input type="image" src="/_layouts/Right_GrayArrow.png" />

したがって、これに背景画像を適用していますが、src画像がその上にオーバーレイされているため、これを見ることができません。

2つの選択肢があります：

1）ImageButton背景画像を使用するようにを変更します。

.RightArrow
{
  width: /* width of image */
  height: /* height of image */
  background-image:url('/_layouts/Right_GrayArrow.png');
}
.RightArrow:hover
{
  background-image: url('/_Layouts/Right_GreenArrow.png');
}

ただし、この方法を使用する場合は、<asp:Button />代わりに使用することをお勧めします。属性<asp:ImageButton />を使用していなくても、を使用しても意味がないようです。src

2）jQueryを使用して、ホバー時に画像を変更します。

$(".RightArrow").hover(function(){
   $(this).attr("src", "/_Layouts/Right_GreenArrow.png");
},
function(){
   $(this).attr("src", "/_Layouts/Right_GrayArrow.png");
});

これはjavascriptが有効になっている場合にのみ機能し、jQueryライブラリを含める必要があることに注意してください。

于 2012-06-18T15:48:57.713 に答える
1

ImageUrl プロパティは、背景画像の設定と同じではありません。CSS を削除し、ページで onmouseout および onmouseover プロパティを設定します。

于 2012-06-18T15:50:19.803 に答える