javascript - 当鼠标悬停在图像上方时，我试图更改图像的 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 而不是 mouseover (因为 mouseout 会在进入 child 时触发)，并确保它在 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在 <img> 上本身，像这样:

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