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等等。然后在mouseout上我希望它恢复到原来的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()

Answer 2

最简单的方法是在没有使用纯JS的jQuery的情况下执行此操作。

像这样的东西

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

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

Answer 3

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

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

另见.hover() documentation。

Answer 4

我会使用带回调的.hover（）来执行此操作

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

Answer 5

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

在mouseover上更改img src然后在mouseout上更改

5 个答案: