jquery class selector does not work
===

I have an input field to which I add a class when it gets the focus. If it loses the focus, the class should be removed and another class added.

    <input type="text" class="input" />

    $(document).ready(function () {

            $(".input").focus(function () {
                $(this).addClass("focus");
            });

            $(".input.focus").blur(function () {
                $(this).removeClass("focus").addClass("error");
            });
    });

    .input.error
    {           
        border: 2px solid Red;         
    }

    .input.focus
    {           
        border: 2px solid Yellow;       
    }

Adding the class works fine, but not the blur function. What is the problem?