Question

尝试在mouseover事件中显示不同的图像。使用以下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/

Answer 1

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

Answer 2

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

Answer 3

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

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

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

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

$('.row-fluid')
> null

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

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

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

应报告其长度为0。

Answer 4

我在纯javascript中的stackoverflow上为另一个人做了这份工作。与你的情况唯一的区别是他希望鼠标点击时图像src改变。 PLS。看看这是否有助于您纠正代码：

Toggle image src attribute using Javascript

鼠标悬停时替换图像源

4 个答案: