显示img后jquery悬停功能不起作用

Question

我有以下代码： 第一个函数使用 rel 属性在鼠标悬停时显示替代图像 第二个函数采用隐藏的 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 和 rel，这应该可以：

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