悬停时如何更改图像源？

Question

我正在尝试使用asp.net和javascript的组合在鼠标悬停时更改图像更改源，这是我正在使用的代码

<asp:ImageButton id="button" runat="server" Height="65px" ImageUrl="~/images/logo.png"   OnMouseOver="src='~/images/hover.png';" OnMouseOut="src='~/images/logo.png';">

它最初显示，但是在悬停时会更改为该显示。 我已经确认目录中有一张名为hover.png的照片。

谢谢您的帮助！ 我不介意在必要时完全更改代码。

Answer 1

如果这是问题所在，并且src现在是/images/hover.png ，那么您正在获取该图像。 然后这将是一个技巧，以找出发生这种情况的原因。

转到浏览器的控制台，然后找到“网络”选项卡，以查看如何请求图像以及服务器对该图像的响应。 如果那是404，请确保图像链接正确无误。

其次，您还可以尝试使用jQuery事件处理程序。

$('img').hover(function () {
  $(this).attr('src', '/images/hover.png');
});

这将在发生悬停事件时更新图像的属性。 这是我为您准备的一种小提琴，您可以理解这种方法。

http://jsfiddle.net/afzaal_ahmad_zeeshan/k4shj/

Answer 2

从src属性中删除~ ，因为这是客户端代码（而不是服务器端）

<asp:ImageButton id="button" runat="server" Height="65px" ImageUrl="~/images/logo.png"   OnMouseOver="src='/images/hover.png';" OnMouseOut="src='/images/logo.png';">
                                                                                                         ^^^^                                  ^^^^