如何在jQuery中实现图片鼠标悬停显示title属性效果？

算力阿峰

2026-6-28

解决图片切换后title悬停不显示的问题

你的代码逻辑里，第三次点击按钮时i会变成3，随后被重置为0，此时生成的图片路径是kitten0.jpg，大概率该图片不存在，浏览器会显示破损图片，部分浏览器在图片加载失败时不会展示title提示，只会显示alt文本。循环逻辑导致的无效索引是问题核心。

修正方案1：调整循环逻辑，锁定有效索引范围

修改JavaScript代码，让i在1-2之间循环，避免生成不存在的图片路径：

var i = 0;
$('#knopToggle').on('click', function () {
    i++;
    var imgAttributes = {
        'src': 'kitten' + i + '.jpg',
        'title': 'Afbeelding van poes' + i,
        'alt': 'Afbeelding van poes' + i
    };
    // 当i超过2时重置为1，而非0
    if (i > 2) {
        i = 1;
    }
    $('#imgKitten').attr(imgAttributes);
});

修正方案2：用数组存储图片信息，逻辑更清晰

把所有图片属性存入数组，通过索引循环切换，避免出错：

// 定义所有待切换的图片信息
var kittenImages = [
    {
        src: 'kitten1.jpg',
        title: 'Afbeelding van poes1',
        alt: 'Afbeelding van poes1'
    },
    {
        src: 'kitten2.jpg',
        title: 'Afbeelding van poes2',
        alt: 'Afbeelding van poes2'
    }
];
var currentIndex = 0;

$('#knopToggle').on('click', function () {
    // 循环切换索引
    currentIndex = (currentIndex + 1) % kittenImages.length;
    // 设置图片属性
    $('#imgKitten').attr(kittenImages[currentIndex]);
});