jQuery:悬停时更改img

Question

我使用 jQuery 背景拉伸(stretch)器，其中背景设置为图像，其 id="bg"位于正文之后。但后来我想在有人将鼠标悬停在带有 class=selector 和 alt=pathToImage 的 div 时更改背景图像。 我知道 alt 不是在 div 中使用的最佳选择，但我需要找到一个“容器”来存储路径。

背景拉伸(stretch)器完全符合其应有的要求，但是当我将鼠标悬停在某物上时，它将背景图像设置为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 中不起作用。

Answer 1

更新

试试这个 fiddle :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()