在鼠标悬停时替换图像源答案

【问题标题】：Replacing image source on mouse hover在鼠标悬停时替换图像源
【发布时间】：2012-09-04 01:48:32
【问题描述】：

试图在鼠标悬停事件中显示不同的图像。使用以下 JavaScript：

$('div.row-fluid').hover(function() {
    $(this).find('img').attr('src','http://leandrovieira.com/projects/jquery/lightbox/photos/image1.jpg');
 }, function() {
    $(this).find('img').attr('src','http://leandrovieira.com/projects/jquery/lightbox/photos/image2.jpg');
 });

还有以下 HTML：

<div class="span27 offset1" style="margin-top: -3.2em">
      <div class="searchbutton"><img src='http://leandrovieira.com/projects/jquery/lightbox/photos/image2.jpg''></div>
</div>

但没有运气。有什么问题？小提琴：http://jsfiddle.net/mpmqm/2/

【问题讨论】：

好吧，你没有以row-fluid 的类显示你的div，所以这是个问题。此外，您的 JS Fiddle 会在图片的 src 之后显示两个引号。

标签： javascript jquery html image src

【解决方案1】：

将row-fluid 作为类名添加到您的容器中。 http://jsfiddle.net/mpmqm/3/

【讨论】：

【解决方案2】：

http://jsfiddle.net/mpmqm/4/ - 你的选择器已关闭。

【讨论】：

【解决方案3】：

说真的，您需要学习如何调试 JavaScript 和 jQuery。

使用 Firefox 和 Chrome，您可以打开控制台并输入（注意：这与您的代码中的 $ 不同！）

$('div.row-fluid')
> null

此时您应该意识到选择器不起作用。

$('.row-fluid')
> null

仍然是null - 哦，是的，没有.row-fluid 元素。

或者，您可以使用调试语句丰富您的代码：

console.log($('.row-fluid'))

应该报告它的长度为0。

【讨论】：

这不是null，而是一个空集（不过确实应该说清楚）。
你是对的：这是浏览器内置的$ 支持返回null。它不是 100% 兼容 jQuery。
仅供参考：我猜您正在使用 Chrome 进行调试。如果您在 jsFiddle 上打开控制台，它将首先在主机上运行代码（使用 MooTools，$ 函数可以返回null）。如果要在结果窗口中运行代码，可以在控制台底部选择它。

【解决方案4】：

我在这里用纯 javascript 在 stackoverflow 上为另一个人完成了这项工作。与您的情况的唯一区别是他希望在鼠标单击时更改图像 src。请。看看这是否有助于您更正代码：

Toggle image src attribute using Javascript

【讨论】：