asp.net - 使用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" />元素，例如：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');
}

但是，如果您要使用此方法，我建议您改用 an <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 库。

Answer 3

ImageUrl 属性与设置背景图像不同。删除 CSS 并在页面中设置 onmouseout 和 onmouseover 属性。