Javascript 在鼠标悬停时替换图像源

试图在鼠标悬停事件中显示不同的图像。使用以下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>

---

但是没有运气。有什么问题吗？Fiddle:

将

行流体

作为类名添加到容器中

-您的选择器已关闭。

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

使用Firefox和Chrome，您可以打开控制台并键入（注意：这与代码中的

$

不同！）

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

$('.row-fluid')
> null

仍然

null

-哦，是的，没有

。行流体

元素

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

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

---

应该报告它的长度为

0

我在stackoverflow上用纯javascript为另一个人做了这项工作。与您的案例唯一不同的是，他希望在鼠标单击时更改图像src。请。查看这是否有助于您更正代码：

---

好吧，您没有使用

行流体类显示您的
div
，因此这是一个问题。另外，您的JS FIDLE在图像的
src
后面显示了两个引号。它不是
null
，而是一个空集（虽然这应该很清楚）。您是对的：浏览器内置了对
$
的支持，返回
null
。它与jQuery不是100%兼容。仅供参考：我猜您是在使用Chrome进行调试。如果在jsFiddle上打开控制台，它将在主框架上运行代码（使用MooTools，
$
函数可以返回
null
）。如果要在结果窗口中运行代码，可以在控制台底部选择它。
console.log($('.row-fluid'))