0

使用 jQuery，我已经能够在悬停时交换图像并在鼠标移出时将其改回。

我有 2 张图片，image1 和 image2。image1 是原始图像，当鼠标悬停时应该显示并且即使在 mouseout 时也应该保持。在下一次悬停时，原始图像替换 image2 等等......

我试过2个代码。第一个在鼠标移出时将图像更改回。第二个，即使在初始悬停时也没有任何反应。

代码 1

$(document).ready(function () {
    $("#img1").hover(function () {
        if ($(this).attr('src') == 'www.domain.com/image1.jpg') {
            $(this).attr('src','www.domain.com/image2.jpg');
        } else if ($(this).attr('src') == 'www.domain.com/image1.jpg') {
            $(this).attr('src','www.domain.com/image1.jpg');
        }
    });
});

代码 2

$(document).ready(function () {
    $("#img1").hover(function () {
        if ($(this).attr('src') == 'www.domain.com/image1.jpg') {
            $(this).attr('src','www.domain.com/image2.jpg');
        }
        if ($(this).attr('src') == 'www.domain.com/image1.jpg') {
            $(this).attr('src','www.domain.com/image1.jpg');
        }
    });
});

帮助将不胜感激。

谢谢！

4

2 回答 2

2

尝试这个：

$("#img1").on('mouseenter', function () {
    if ($(this).attr('src') == 'www.domain.com/image1.jpg') {
        $(this).attr('src','www.domain.com/image2.jpg');
    } else if ($(this).attr('src') == 'www.domain.com/image2.jpg') {
        $(this).attr('src','www.domain.com/image1.jpg');
    }
});

根据我的评论，您没有使用.hover()快捷方式，只需绑定mouseenter事件即可。

编辑：我也修复了这else if部分，但我把代码优化留给你。

于 2013-10-25T16:27:05.080 回答
1

正如文档中明确指出的那样，该hover函数向mouseenter和都添加了一个处理程序mouseleave。

如果您只想处理mouseenter，请不要这样做。

于 2013-10-25T16:26:08.563 回答