如何在悬停时更改图像源？

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';">
                                                                                                         ^^^^                                  ^^^^