Question

使用jQuery，我已经能够在悬停时交换图像并在mouseout上更改它。

我有2张图片，image1和image2。 image1是原始图像，当悬停mouse2应该显示并且应该在mouseout上保持均匀。在下一次悬停时，原始图像会替换image2，依此类推......

我尝试了2个代码。第一个在mouseout上更改图像。第二个，即使在最初的悬停时也没有任何反应。

代码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');
        }
    });
});

非常感谢帮助。

谢谢！

Answer 1

试试这个：

$("#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部分，但我将代码优化留给您。

Answer 2

正如文档明确指出的那样，hover函数为mouseenter和mouseleave添加了处理程序。

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

2张图片。仅在悬停时更改，不在鼠标输出上

2 个答案: