Javascript 鼠标悬停会导致意外行为

我有一个一行的表，其中列出了一系列的6个按钮。我为每个按钮预加载了12个图像2。每个按钮都以其蓝色图像的版本开始。当用户将鼠标悬停在任何按钮上时，图像将切换到绿色版本。当鼠标离开按钮时，它会变回蓝色。那部分很好用。差不多

如果我的鼠标动作“正常”，一切都很好。但在测试中，如果我开始随机快速移动鼠标，我几乎可以立即生成一个情况，鼠标离开事件会导致按钮保持绿色。这永远不应该发生。绿色图像应仅在鼠标悬停在按钮上时显示

我是jQuery新手，不知道自己做错了什么。有人能看到吗？谢谢

---

关于CSS3的注意：我在这篇文章中稍微简化了这个问题。在真实版本中，每个按钮都可以以蓝色或绿色图像开始，因此我需要在翻转之前测试显示的图像。我不认为CSS3可以做到这一点，但如果我错了，我会接受CSS3解决方案

$("#menu_row").find('button').hover(
    function() {flipColor(event.target.id);}
);

function flipColor(btn_id) {

    var image = $('#'+btn_id).find('img').get(0);

    switch (btn_id) {

        case 'btn_home' :
            if (image.src == home_green.src)
                image.src = home_blue.src;
            else image.src = home_green.src;
            break;

        case 'btn_capabilities' :
            if (image.src == capabilities_green.src) 
                image.src = capabilities_blue.src;
            else image.src = capabilities_green.src;
            break;

        case 'btn_beliefs' :
            if (image.src == beliefs_green.src) 
                image.src = beliefs_blue.src;
            else image.src = beliefs_green.src;
            break;

        case 'btn_biography' :
            if (image.src == biography_green.src) 
                image.src = biography_blue.src;
            else image.src = biography_green.src;
            break;

        case 'btn_experience' :
            if (image.src == experience_green.src) 
                image.src = experience_blue.src;
            else image.src = experience_green.src;
            break;

        case 'btn_contact' :
            if (image.src == contact_green.src) 
                image.src = contact_blue.src;
            else image.src = contact_green.src;
            break;
    }
}

以下是HTML：

<table><tr id='menu_row'>
    <td id='home'>
        <button id='btn_home' class='active'>
            <img src="images/home_blue.png">
        </button>
    </td>

    <td id='capabilities'>
        <button id='btn_capabilities'>
            <img src="images/capabilities_blue.png">
        </button>
    </td>

    <td id='beliefs'>
        <button id='btn_beliefs'>
            <img src="images/beliefs_blue.png">
        </button>
    </td>

    <td id='biography'>
        <button id='btn_biography'>
            <img src="images/biography_blue.png">
        </button>
    </td>

    <td id='experience'>
        <button id='btn_experience'>
            <img src="images/experience_blue.png">
        </button>
    </td>

    <td>
        <button id='btn_contact'>
            <img src="images/contact_blue.png">
        </button>
    </td>
</tr></table>

---

为什么不使用CSS3解决这个问题呢？我在这篇文章中稍微简化了这个问题。在真实版本中，每个按钮都可以以蓝色或绿色图像开始，因此我需要在翻转之前测试显示的图像。我不认为CSS3可以做到这一点，是吗？嗯，我正在考虑更改映像的类，而不是更改src。这是个好主意。我的问题是，我是否仍然可以用这种方式预加载图像。如果鼠标悬停事件必须进行网络调用以获取替换映像，则它不可能有足够的响应。映像有多大？如果它们相当小，则使用精灵，即单个大图像和以行/线圈排列的各种图像。然后，您只需使用类，例如使用toggleClass和CSS样式来更改其中的图像偏移。