Ciao a tutti! sto provando ad assegnare ad una textbox degli stili diversi per l'effetto hover e focus.

Questo è il mio HTML dove alla pressione di un bottone vengono assegnati gli stili alla textbox "#prova"

<input type="text" id="prova">

<button onclick="prova()">Assegna gli stili</button>

Questa è la funzione prova
codice:
function prova(){
        $("#prova").css("background-color","red");
    $("#prova").focus(function() {        $(this).css("background-color","yellow");    });    $("#prova").hover(function() {        $(this).css("background-color","blue");    });    $("#prova").mouseout(function() {        $(this).css("background-color","red");    });
}
Gli stili vengono assegnati, ma non ottengo lo stesso risultato come se scrivessi gli stili nel tag <style></style>

come in questo modo...
#prova{background-color:red;}
#prova:focus{background-color:yellow;}
#prova:hover{background-color:blue;}

C'è un modo per assegnare dinamicamente questi stili senza creare conflitti tra le pseudoclassi???

Grazie!