Problemas con mouseout y mouseover

[tempto]

Yo tuve un problema parecido al tuyo, lo solucioné con jquery. Tenía un menú con 5 opciones y quería que cada vez que se pulsase una, se activara y si se pulsaba otra, ésta nueva se activara y se desactivaran las demás.
Te dejo el código de cómo lo hice:

Código Javascript:

<script type="text/javascript">
            $(document).ready(function() {
                $(".btn_principal").click(function() {
                    $(this).addClass("activo_principal");
                    $(".btn_historia").removeClass("activo_historia");
                    $(".btn_actividades").removeClass("activo_actividades");
                    $(".btn_grupos").removeClass("activo_grupos");
                    $(".btn_contacto").removeClass("activo_contacto");
                });
                
                $(".btn_historia").click(function() {
                    $(this).addClass("activo_historia");
                    $(".btn_principal").removeClass("activo_principal");
                    $(".btn_actividades").removeClass("activo_actividades");
                    $(".btn_grupos").removeClass("activo_grupos");
                    $(".btn_contacto").removeClass("activo_contacto");
                });
                
                $(".btn_actividades").click(function() {
                    $(this).addClass("activo_actividades");
                    $(".btn_principal").removeClass("activo_principal");
                    $(".btn_historia").removeClass("activo_historia");
                    $(".btn_grupos").removeClass("activo_grupos");
                    $(".btn_contacto").removeClass("activo_contacto");
                });
                
                $(".btn_grupos").click(function() {
                    $(this).addClass("activo_grupos");
                    $(".btn_principal").removeClass("activo_principal");
                    $(".btn_historia").removeClass("activo_historia");
                    $(".btn_actividades").removeClass("activo_actividades");
                    $(".btn_contacto").removeClass("activo_contacto");
                });
                
                $(".btn_contacto").click(function() {
                    $(this).addClass("activo_contacto");
                    $(".btn_principal").removeClass("activo_principal");
                    $(".btn_historia").removeClass("activo_historia");
                    $(".btn_actividades").removeClass("activo_actividades");
                    $(".btn_grupos").removeClass("activo_grupos");
                });
            });  
        </script>
 

Básicamente, por cada botón tengo dos clases, una con la imagen en estado normal y la otra con la imagen activada, cada vez que se pulsa un botón se "llama" a la clase activa y se "llaman" a las clases normal del resto de botones. Que es lo mismo que tienes en tu código.

Espero que te sea de ayuda