在鼠标上更改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（）

read .prop（）vs .attr（）

Answer 2

在不使用纯js的情况下执行此操作的最简单方法。

类似这样的东西

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

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

Answer 3

我将使用.hover（）带回调

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

Answer 4

将数据属性添加到第一个图像以存储原始文件指针（" 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'));
    });
});

Answer 5

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

还请参见.hover（）文档。