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

Posted 2023-05-08

【中文标题】当鼠标悬停在图像上方时，我正在尝试更改图像的 src 属性。这个JQuery代码不应该工作有啥原因吗？

【英文标题】：I'm trying to change an Image's src attribute when the mouse hovers above it. Is there a reason why this JQuery code shouldn't work?当鼠标悬停在图像上方时，我正在尝试更改图像的 src 属性。这个JQuery代码不应该工作有什么原因吗？

【发布时间】：2011-04-11 07:17:21

【问题描述】：

$('.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>

【问题讨论】：

什么是.icon1？ :) 标记在这里会有所帮助。

另外，你确定使用相对路径是你想要的吗？

@serv 你确定它应该是recursos/botban/maq1.png 而不是/recursos/botban/maq1.png

您的 img 标签没有关闭，但这可能只是一个错字。

页面上的任何其他 javascript 是否可以工作？您可能在某处出现语法错误，因此没有脚本在运行？

【参考方案1】：

有几件事，我会使用mouseenter 而不是mouseover（因为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 放在<img> 本身上，如下所示：

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

【讨论】：

它一直在 document.ready 中运行，但这并没有给我任何帮助：/

@serv-bot - 它在做什么是...你是在动态加载这个.icon1，例如通过 ajax？

.icon1 没有被动态加载。它真的什么也没做；图像保持静止。

图像也在一个 div 框中，虽然我真的不认为这很重要。

@serv-bot - 页面上是否有任何 JavaScript 错误？检查控制台，听起来这根本没有运行，至少不是没有错误。

【参考方案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);

【讨论】：

对不起，我已经尝试过了，但它不起作用。我在帖子中说过。

你确定这些图片确实存在（在那个路径中）？

即使没有，浏览器至少应该显示损坏的图像符号。