使用asp：imagebutton和CSS更改悬停图像？答案

【问题标题】：Change image on hover using asp:imagebutton and CSS?使用asp：imagebutton和CSS更改悬停图像？
【发布时间】：2012-06-20 15:02:08
【问题描述】：

我有以下代码，但它似乎不起作用：

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

请指教。谢谢

【问题讨论】：

标签： asp.net .net css

【解决方案1】：

ImageButton 控件呈现为<input type="image" /> 元素，其中ImageUrl 属性变为src 属性，如：

<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 />。如果您甚至不使用 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 库。

【讨论】：

谢谢！我确实尝试了第一个选项，但无法让它工作。一定漏掉了什么。第二个选项看起来也不错！
更新：第一个选项有效！我拼错了我的班级名称。再次感谢！
厌倦了在非 JQuery 问题上看到 JQuery 答案
@RustyH Me too ;) Javascript 等价物，可以使用如下内容： document.getElementById('').src = "/_Layouts/Right_GreenArrow.png"

【解决方案2】：

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

【讨论】：

【解决方案3】：

我更喜欢这种方式：

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

再见

【讨论】：

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