在 mouseover 上更改 img src 然后在 mouseout 上更改回来答案

【问题标题】：change img src on mouseover then change back on mouseout在 mouseover 上更改 img src 然后在 mouseout 上更改回来
【发布时间】：2014-01-30 14:35:28
【问题描述】：

我有一张较大的图片，下面有两个较小的缩略图 - 标记如下：

<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，依此类推。然后在 mouseout 时，我希望它恢复到原来的 src。

我目前正在使用以下 javascript 来执行此操作，但点击时：

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

我想将其更改为悬停，但不确定如何。

【问题讨论】：

这是您之前的问题 + 已接受的答案。
老兄，学习javascript/jQuery 否则你只会一直复制/粘贴代码......你最后一个答案问题只是用鼠标悬停交换点击

标签： javascript jquery

【解决方案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()

【讨论】：

【解决方案2】：

使用纯 JS 不使用 jQuery 的最简单方法。

像这样的

<img src="first.png" onmouseover="this.src='second.jpg';"
        onmouseout="this.src='first-or-other-image.png'">

也许不是很漂亮，但可以正常工作

【讨论】：

有人给了这个-1，但我认为这是一个可行的解决方案，不是题外话。
像魅力一样工作并且非常简单 - 应该是公认的解决方案！

【解决方案3】：

我会用带有回调的 .hover() 来做到这一点

$('.mainthumb').hover(function () {
      // change the src        
}, function () {
      // change back the src 
});

【讨论】：

【解决方案4】：

将data属性添加到第一张图像以存储原始文件指针（“image.jpg”），如下所示：

<img src="../images/image.jpg" data-original="../images/image.jpg" class="left main" alt="main image" />

然后将其添加到您的 javascript：

$(function () {
    $('.mainthumb').hover(function () {
        $('.main').attr('src', this.src.replace('-thumb', ''))
    }, function() {
        var main = $('.main');
        main.attr('src', main.attr('data-original'));
    });
});

【讨论】：

【解决方案5】：

$('.mainthumb').mouseenter(function () {
    // Do your stuff.
});

$('.mainthumb').mouseleave(function () {
    // Do your stuff.    
});

另见.hover() documentation。

【讨论】：