jquery hover功能不工作后显示img

Question

我有下面的代码： 第一个功能显示鼠标替代图像使用reltribute 第二个功能需要一个隐藏的div和显示内容在另一个地方在相同页面，但是当我将图像悬停在图像上时，图像不会改变，隐藏div上的悬停工作正常，但在其他位置点击后，悬停不起作用。我认为这可能是文档就绪脚本，因为我准备好后改变页面，但我不确定，有任何建议？谢谢

$(document).ready(function(){ 
$(function() { 
    $('img[rel]').hover(function() { 
     $(this).attr('tmp', $(this).attr('src')).attr('src', $(this).attr('rel')).attr('rel', $(this).attr('tmp')).removeAttr('tmp'); 
    }).each(function() { 
     $('<img />').attr('src', $(this).attr('rel')); 
    });; 
}); 

$(function(){ 
    $('.id2').one("click",function() { 
     var newPara = $('#test').html(); 
     $('#big_photo').append(newPara); 
    }); 
}); 

}）;

Answer 1

我认为你应该考虑使用sprites进行图像切换，因为在我看来这是一个更优雅的解决方案。

• 你不需要
• 你没有装载第二图像问题rel属性（这不是一个有效的IMG属性 反正），因为它是所有 加载一次

也

$(document).ready(function(){ 

和

$(function() { 

是一样的，你只需要他们这样的一个：

$(function() { 
    // all your jQuery code 
}); 

就足够了。

---

确定，然后用于交换SRC悬停的相对输入/输出，这应该工作：

$('img[rel]').bind('mouseenter mouseleave',function() { 
    var oldSrc = $(this).attr('src'); 
    $(this).attr('src', $(this).attr('rel')).attr('rel', oldSrc); 
}); 

演示：http://jsfiddle.net/P37UX/1/