I'm using jQuery to change the background image of a button depending on the class associated with it on hover. It only works if I put the hover statements in separate functions, however. Why is this?

Here's the NON working code, always evaluates to the .submit hover statement, even when that class is removed via the keyup event.

    $(function() {
    {

$('.submit-getinfo').hover(function ()
{
    $(this).css( {backgroundPosition: "right bottom"} );
}, function() {
    $(this).css( {backgroundPosition: "right top"} );
    //$(this).removeClass('submithover');

});

$('.submit').hover(function ()
{
    $(this).css( {backgroundPosition: "left bottom"} );
}, function() {
    $(this).css( {backgroundPosition: "left top"} );
    //$(this).removeClass('submithover');

});

    }});

Working code:

    $(function() {
    {


$('.submit').hover(function ()
{
    $(this).css( {backgroundPosition: "left bottom"} );
}, function() {
    $(this).css( {backgroundPosition: "left top"} );
    //$(this).removeClass('submithover');

});
    }});

    $('#test').bind('keyup', function() { 

    if (url == 'devel') {
    $("#submit").addClass("submit-getinfo").removeClass("submit");

$('.submit-getinfo').hover(function ()
{
    $(this).css( {backgroundPosition: "right bottom"} );
}, function() {
    $(this).css( {backgroundPosition: "right top"} );
//$(this).removeClass('submithover');

});
    } } );

I just fail to see why I have to put the hover statements in separate functions, instead of sticking both in the main DOM.