显示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/