javascript - 鼠标悬停时更改 img src，然后鼠标移出时更改回来

Question

我有一张较大的图像，其下方有两个较小的缩略图 - 标记如下:

<img src="../images/image.jpg" class="left main" alt="main image" /> 
<img src="../images/image2-thumb.jpg" class="left mainthumb" alt="image two" /> 
<img src="../images/image3-thumb.jpg" class="left thumb mainthumb" alt="image three" />

我希望当 image2-thumb 或 image3-thumb 悬停时将 image.jpg 更改为悬停图像 src 但不带 -thumb。

所以如果我将鼠标悬停在 image2-thumb.jpg 上，那么 image.jpg 就会变成 image2.jpg 等等。然后在鼠标移开时我希望它恢复到原来的 src。

我当前使用以下 JavaScript 来执行此操作，但点击时:

$(function () {
    $('.mainthumb').click(function () {
        $('.main').attr('src', this.src.replace('-thumb', ''))
    });
});

我想将其更改为悬停，但不知道如何更改。

Answer 1

使用.hover()

$(function () {
    $('.mainthumb').hover(function () {
        $('.main').prop('src', this.src.replace('-thumb', ''));
    }, function () {
        $('.main').prop('src', '../images/image.jpg');
    }
});

并使用.prop()而不是.attr()

阅读.prop() vs .attr()