使用asp:imagebutton和CSS在悬停时更改图像？

Question

我有以下代码但它似乎没有工作:

<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;
}

请指教.谢谢

Answer 1

我更喜欢这种方式:

<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'"/>

再见

Answer 2

一个ImageButton控制呈现为<input type="image" />与元件ImageUrl特性成为src等属性:

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