jQuery：悬停时更改img

Posted 2023-05-08

【中文标题】jQuery：悬停时更改img

【英文标题】：jQuery: change img when hover

【发布时间】：2012-06-10 05:16:33

【问题描述】：

我正在使用 jQuery 背景拉伸器，其中背景设置为图像，id="bg" 紧跟在正文之后。但是当有人用 class=selector 和 alt=pathToImage 悬停一个 div 时，我想更改背景图像。 我知道 alt 不是最好在 div 中使用，但我需要找到一个“容器”来存储路径。

background-stretcher 与它应该的完全一样，但是当我悬停某些东西时，它会将背景图像设置为 display="none"。 我真的希望有人可以帮助我。

代码是：

$(window).load(function()
$('.selector').hover(function() 
    var img = document.createElement('img');
    img.src = $(this).attr('alt');
    img.onload = function() 
        $('#bg').fadeOut(function() 
            $(this).setAttribute('src', img.src).fadeIn();
        ); ; return false; ); );

提前谢谢你:)

编辑！ 抱歉花了这么长时间，但让 html 阅读起来不那么痛苦： http://jsfiddle.net/gaFfD/ 由于某些奇怪的原因，悬停效果在 jsfiddle 中不起作用。

【问题讨论】：

“我知道在 div 中使用 alt 并不是最好的选择，但我需要找到一个“容器”来存储路径。” 这就是 @ 987654322@是为了。

能否提供一个jsfiddle：jsfiddle.net

你能发布你的标记吗？还是创建一个小提琴？

请注意，您的代码中包含竞争条件。设置onload 之前设置src，否则如果图像在缓存中，事件可能会在行设置src和行设置之间触发（并且，找不到处理程序，什么也不做） onload。 （是的，真的；浏览器上的 javascript 是单线程的，除非您使用 Web Worker，但浏览器本身不是。当一个事件触发时，它会将它发现的处理程序排队，以便在 JavaScript 线程运行时运行下一个免费的，但如果没有找到，它不会将它们排队。）

【参考方案1】：

更新

试试这个小提琴：http://jsfiddle.net/gaFfD/14/

应该是

$(this).attr('src', img.src).fadeIn()

而不是

$(this).setAttribute('src', img.src).fadeIn();

我用过

jQuery(document).ready(function () 

而不是

$(window).load(function() 

文档就绪和窗口加载之间的区别： window.onload vs $(document).ready()

【讨论】：

哇。这使它工作，但不是它应该的方式。它应该在开始悬停时使用fadein()，而不是fadeout()，然后停留在那里。但相反，它在完成淡入淡出时设置 display:none。您对此有快速解决方法吗？

更新了我的小提琴，请参阅我的答案中的链接。我将事件从悬停更改为鼠标悬停，因为您不需要任何 mouseout-Event。如果图像已被用作背景，我还阻止了图像的更改。

看起来真的很棒。但是从第一张图片加载背景有什么问题？它只是在其他人看起来更流畅的地方弹出。不过谢谢。你就是男人！

我没有这个效果。你用的是什么浏览器？

谷歌浏览器。我刚刚在 IE 中测试过，效果很好。看起来它在淡出时很容易，但在淡入时会突然爆发。但这没关系。如果它在 FF 和 IE 中完美运行，部分在 Chrome 中运行，那么我非常高兴^^