当鼠标悬停在图像上方时，我试图更改图像的 src 属性。这个 JQuery 代码有什么原因不能工作吗？

Question

$('.icon1').mouseover(function(){
   $(this).find('img').attr('src', 'recursos/botban/maq1.png');
});

应该工作正常吗？这只是一个随意的测试，看看出了什么问题，但它仍然坏了。

我也尝试过 $('.icon1').hover(function(){... ，它也不起作用。

我真正想要的是...

$('.icon1').mouseover(function(){
        var alt = $(this).find('img').attr('src')+'.png';
        $(this).find('img').attr('src', $(this).attr('id')+''.png);
}).mouseout(function(){
        $(this).find('img').attr('src', alt);
});

HTML每个图像如下...

<a class='icon1'><img src='recursos/botban/veh1.png'></a>

Answer 1

有一些事情，我会使用 mouseenter 而不是 鼠标悬停（自 mouseout 将在进入子级时触发），并确保它在 document.ready 处理程序内运行，就像这样：

$(function() {
  $('.icon1').each(function(){
    $.data(this, 'src', $(this).find('img').attr('src'));
  }).hover(function(){
    $(this).find('img').attr('src', this.id + '.png'); //may need adjustment
  }).mouseout(function(){
    $(this).find('img').attr('src', $.data(this, 'src'));
  });
});

我不确定您想要什么悬停图像，但一般方法是存储它原来的内容并使用，然后在 mouseleave。或者，只需将 hover 放在 本身上，如下所示：

$(function() {
  $('.icon1 img').each(function(){
    $.data(this, 'src', this.src);
  }).hover(function(){
    this.src = 'otherImage.png';
  }).mouseout(function(){
    this.src = $.data(this, 'src');
  });
});

Answer 2

(function($) {  // private closure;  
    $(function() {  // document load;
        $('.icon1').hover(function(){
            $(this).find('img').attr('src', "recursos/botban/veh1.png");
        }, function(){
            $(this).find('img').attr('src', "recursos/botban/veh2.png");
        });
 });
})(jQuery);