mouseOut: a veces no me funciona ¿?

[Riso]

Buenas tardes a todos!

Miren, tengo unos botones a cuales les hago mouseover, mouseout y click en jquery para darle mas pinta a una pagina, la cosa es que después de un rato deja de andar el mouseOut para volver al estado inicial del boton, no se si me esta fallando la logica de programacion o es un mal uso de los recursos javascript que implemento...

Aqui les dejo el code y la pagina con la prueba:

http://veronicaguido.com.ar/test.html

Código HTML:

<script type='text/javascript'>

    $(document).ready(function(){
        
        $(".boton").mouseover(function(){    
                                    this.src = this.src.replace("_off","_on");        
                                    })
                                    
        $(".boton").mouseout(function(){    
                                    this.src = this.src.replace("_on","_off");        
                                    })
                                    
        $(".boton").click(function(){
                                    $("#ser").attr("src","img/menu1_off.png");
                                    $("#inf").attr("src","img/menu2_off.png");
                                    $("#pro").attr("src","img/menu3_off.png");
                                    $("#con").attr("src","img/contacto_off.png");
                                    $("#por").attr("src","img/portfolio_off.png");
                                    $("#ini").attr("src","img/inicio_off.png");
                                    this.src = this.src.replace("_off","_on");
            
                                    $(this).mouseout(function(){
                                                this.src = this.src.replace("_off","_on");
                                    })
        })
    
    })
    
</script>

<a href="#"><img border="0" src="img/menu1_off.png" id="ser" class="boton"></a>
<a href="#"><img border="0" src="img/menu2_off.png" id="inf" class="boton"></a>
<a href="#"><img border="0" src="img/menu3_off.png" id="pro" class="boton"></a>
<a href="#"><img border="0" src="img/inicio_on.png"     id="ini" class="boton"></a>
<a href="#"><img border="0" src="img/portfolio_off.png" id="por" class="boton"></a>
<a href="#"><img border="0" src="img/contacto_off.png"     id="con" class="boton"></a> 

Info: Los vinculos navegan por una misma pagina.

Cualquier idea para seguir luchando con esto seria bien recivida!!
Desde ya muchas gracias!

[kokoou]

Código Javascript:

$('.boton').hover(
    function() { // mouseover
        this.src = this.src.replace("_off","_on");
    },
    function() { // mouseout
        this.src = this.src.replace("_on","_off");
    }
);
 

http://api.jquery.com/hover/

[Riso]

gracias kokoou por contestar, sigue sucediendo lo mismo de esa manera... ahi modifique el test online....

[kokoou]

Cuál es el problema? yo lo veo funcionar correctamente.