使用 asp:imagebutton 和 CSS 在悬停时更改图像？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11086298/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Change image on hover using asp:imagebutton and CSS?
提问by user1266515
I have the following code but it doesnt seem to work:
我有以下代码，但它似乎不起作用：
<td align="center" style="padding-bottom:52.5px">
<asp:ImageButton CssClass="RightArrow" ID="Image2" runat="server" ImageUrl="/_layouts/Right_GrayArrow.png"/>
</td>
And a CSS class to change image on hover:
还有一个 CSS 类，用于在悬停时更改图像：
.RightArrow:hover
{
background-image: url('/_Layouts/Right_GreenArrow.png') !important;
}
Please advise. Thanks
请指教。谢谢
回答by Fabrizio
I prefer this way:
我更喜欢这种方式：
<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'"/>
bye
再见
回答by Curt
An ImageButtoncontrols renders as a <input type="image" />element with the ImageUrlproperty becoming the srcattribute like:
一个ImageButton控制呈现为<input type="image" />与元件ImageUrl特性成为src等属性：
<input type="image" src="/_layouts/Right_GrayArrow.png" />
Therefore you are applying a background image to this, which you cannot see as the srcimage is being overlayed on top of it.
因此，您正在为此应用背景图像，因为src图像覆盖在它上面，所以您看不到它。
You have 2 choices:
您有 2 个选择：
1) Change the ImageButtonto use a background image:
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');
}
If you are going to use this method though, I would recommend using an <asp:Button />instead. It seems pointless using an <asp:ImageButton />if you're not even making use of the srcattribute.
不过，如果您打算使用此方法，我建议您<asp:Button />改用 。<asp:ImageButton />如果您甚至不使用该src属性，那么使用 an 似乎毫无意义。
2) Use jQuery to change the image on hover:
2) 使用 jQuery 在悬停时更改图像：
$(".RightArrow").hover(function(){
$(this).attr("src", "/_Layouts/Right_GreenArrow.png");
},
function(){
$(this).attr("src", "/_Layouts/Right_GrayArrow.png");
});
Worth noting this will only work with javascript enabled, and you must include the jQuery library.
值得注意的是，这仅适用于启用 javascript，并且您必须包含 jQuery 库。
回答by Paul Coghill
The ImageUrl property isn't the same as setting the background-image. Remove the CSS and set the onmouseout and onmouseover properties in your page.
ImageUrl 属性与设置背景图像不同。删除 CSS 并在页面中设置 onmouseout 和 onmouseover 属性。
