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

Posted 2023-05-09

【中文标题】如何在悬停时更改图像源？

【英文标题】：How to change an images source upon hover?

【发布时间】：2014-06-04 08:36:03

【问题描述】：

我正在尝试使用 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 的照片。

感谢您的帮助！如有必要，我不介意完全更改代码。

【问题讨论】：

我建议启动 fiddler 看看发生了什么。它会具体向您显示它正在尝试获取的图像以及是否能够获取它。

只是好奇，为什么不直接使用 CSS 和 :hover？

【参考方案1】：

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

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

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

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

这将在悬停事件时更新图像的属性。这是我编的一个fiddle让你理解这个方法。

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

【参考方案2】：

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

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