jQuery on（'hover'）事件替换

Question

我正在调换悬停时的img src。通常我会用：

$('#img').hover(function() { 
    $(this).attr('src', 'http://www.example.com/new-img.jpg'); 
}); 

不过，我通过Ajax加载的内容，以便通常我会用：

$('#main').on('hover', '#img', function() { 
    $('#img').attr('src', 'http://www.example.com/new-img.jpg'); 
}); 

但我读的是在（“悬停”，.. ）在jQuery 1.8中被弃用，并在1.9（jQuery Docs）中被删除，这正是我目前使用的。没有任何人有任何工作，除了使用：

$('#main').on('mouseenter', '#img', function() { 
    $('#img').attr('src', 'http://www.example.com/new-img.jpg'); 
}); 

$('#main').on('mouseleave', '#img', function() { 
    $('#img').attr('src', 'http://www.example.com/old-img.jpg'); 
}); 

Answer 1

不，你需要做两个调用。但对于加jQuery的点，你可以把它们连：

$('#main').on('mouseenter', '#img', function() { 
    $('#img').attr('src', 'http://www.example.com/new-img.jpg'); 
}).on('mouseleave', '#img', function() { 
    $('#img').attr('src', 'http://www.example.com/old-img.jpg'); 
}); 

而且如下本杰明评论，可以进一步优化（你会看到老式的Javascript点这段时间）：

$('#main').on('mouseenter', '#img', function() { 
    this.src = 'http://www.example.com/new-img.jpg'; 
}).on('mouseleave', '#img', function() { 
    this.src = 'http://www.example.com/old-img.jpg'; 
}); 

Answer 2

可以将多个事件，然后检查event.type这样的：

$('#main').on('mouseenter mouseleave', '#img', function(e) { 
    $(this).attr('src', 'http://www.example.com/' + (e.type == 'moseenter' ? 'new-img.jpg' : 'old-img.jpg')); 
}); 

jsFiddle

您还可以使用switch-case或if/else：

$('#main').on('mouseenter mouseleave', '#img', function(e) { 
    switch(e.type) { 
     case 'mouseenter': 
      $(this).attr('src', 'http://www.example.com/new-img.jpg'); 
      break; 
     case 'mouseleave': 
      $(this).attr('src', 'http://www.example.com/old-img.jpg'); 
      break; 
    } 
} 

Answer 3

这是一种替代方法不涉及JavaScript的根本：

而是采用了src的<img>属性使用DIV，给该分区的相同的ID（记得给它正确的宽度和高度）。

在你的CSS，给那div一个background-image是这样的：

#img{ 
    background-image: url('http://www.example.com/old-img.jpg'); 
} 

在:hover改变它

#img:hover{ 
    background-image: url('http://www.example.com/new-img.jpg'); 
} 

（fiddle）