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');
});

但我正在阅读（'hover'，...）在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的替代方法：

不使用带有<img>属性的src使用div，请为该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）

jQuery on（'hover'）事件替换

3 个答案: