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

请指教。谢谢。

- user1266515

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

再见

- Fabrizio

---

虽然我喜欢 CSS 的灵活性，但在某些情况下这是一个可行的选择。 - Joe Johnston

Answer 2

一个ImageButton控件呈现为一个带有src属性的<input type="image" />元素，该属性值来源于ImageUrl属性，示例如下：

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

因此，您正在将背景图片应用于此处，但是由于src图像被覆盖在其上，因此无法看到该背景图片。

您有两个选择：

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 属性，则使用 <asp:ImageButton /> 看起来毫无意义。

---

2）使用 jQuery 在悬停时更改图像：

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

值得注意的是，这个功能只在启用了 JavaScript 的情况下才能使用，并且您必须包含 jQuery 库。

- Curtis

---

谢谢！我尝试了第一个选项，但无法使其工作。可能是我漏掉了什么。第二个选项看起来也不错！ - user1266515

更新：第一个选项起作用了！我拼错了类名。再次感谢！ - user1266515

非常厌烦在与 JQuery 无关的问题上看到 JQuery 的答案。 - RustyH

@RustyH 我也是 ;) 对于JavaScript等效的代码，可以使用类似这样的语句：document.getElementById('<%=ibtnMyImageButton.ClientID %>').src = "/_Layouts/Right_GreenArrow.png" - Zeek2

Answer 3

ImageUrl属性与设置background-image不同。请删除CSS并在页面中设置onmouseout和onmouseover属性。

- Paul Coghill