Question

我有一个单行表，列出了一系列6个按钮。我正在预装12张图片（每个按钮2张）。每个按钮都以其蓝色图像的版本开始。当用户将鼠标悬停在任何按钮上时，图像将切换为绿色版本。当鼠标离开按钮时，它会变回蓝色。那部分工作正常。几乎。

如果我是正常的＆＃39;用我的鼠标动作，一切都很棒。但是在测试中，如果我开始随机快速地移动鼠标，我几乎可以立即产生鼠标离开事件导致按钮保持绿色的情况。这绝不应该发生。只有当鼠标悬停在按钮上时才会显示绿色图像。

我是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>

鼠标悬停会导致意外行为

0 个答案: