Obtener el background inicial de los divs en jquery

Buenos días a todos. Tengo un problema que parece bastante sencillo pero que no acabo de resolver.
La cuestión es que tengo un panel de navegación (etiqueta nav) con varios botones, y según en que sección de la página estoy, tienen un color de fondo diferente (lo modifico en jquery según si estoy en la sección inicio, contacto...). El código html de los botones es el siguiente:

Código HTML :

   <nav>
      <ul>
         <li><a href="#" id="btnInicio" type="button" class="btnNav">Inicio</a></li>
         <li><a href="#" id="btnTutoriales" type="button" class="btnNav">Tutoriales</a></li>
         <li><a href="#" id="btnContacto" type="button" class="btnNav"> Contacto</a></li>
      </ul>
   </nav>

Lo que he conseguido mediante jquery es que según paso el ratón sobre éstos, cambien de color de fondo mediante el método mouseover(). También sabría que vuelvan a otro color al salir el ratón sobre ellos mediante el método mouseout(). Sería así:

Código Javascript :

$(document).on("ready",CbioColorHover);

function CbioColorHover()
{
  $(".btnNav").mouseover(ratonDentro);

   $(".btnNav").mouseout(ratonFuera);
}

function ratonDentro()
{
  $(this).css("background-color","rgba(10,63,122,0.9)");
}

function ratonFuera()
{
  $(this).css("background-color","#D23D15");
}

El problema es que no sé como realizar que la función de ratonFuera() (o donde se pueda definir) coja el color de fondo que tenía el botón anteriormente a cambiarlo mediante el método mouseover(), y lo asigne otra vez. Porque de esta forma asigno el mismo color a todos los botones. He leído algo de que se podría almacenar el valor inicial en el método data() de jquery, pero no me acaba de salir.

Muchas gracias a todos

Sería más eficiente y sencillo si lo hicieras con CSS.

Código CSS :

.btnNav{
    background: rgba(10,63,122,0.9);
}

.btnNav:hover{
    background: #D23D15;
}

JavaScript es bueno, pero no hay que abusar de su uso.

Saludos

Muchas gracias por contestar Alexis88 e intentar ayudarme.

Sí que conozco la propiedad hover de css, el problema es que en mi caso (creo yo) no valdría por medio de css. Antes, cuando tenía los botones de un único color la utilizaba y queda perfectamente. El problema es que intento hacer algo más complicado que esto, ya que en la web que quiero hacer un mismo botón va cambiando de color. A ver si me consigo explicar bien.

En mi caso, todos los botones que se encuentran dentro del nav tienen el mismo color de fondo excepto uno, que es más oscuro ya que nos encontramos dentro de la sección que se ha visualizado al pulsar sobre él. De esta forma queda más visual en la web que estamos dentro de esa sección. Si seguidamente pulso otro botón, cambio las propiedades css de los divs de mi página web mediante jquery: se esconde la sección en la que estaba anteriormente y se muestra la sección que acabo de pulsar.

Entonces, mediante jquery hago que el botón que antes estaba más oscuro pase al color del resto de los botones y el botón que acabo de pulsar se oscurezca (teniendo el color del botón anterior).

Sé realizar esto en css y en jquery de forma estática, es decir, que un botón tenga un único color de fondo, me cambie de color con la propiedad hover y al salir el ratón de él, me vuelva al mismo color de antes. El problema es que en mi caso un mismo botón puede tener dos colores de fondo diferentes dependiendo de si estamos en su sección o en otra, por lo que yo quiero que al pasar sobre esos botones, se obtenga ese color de fondo y al salir el ratón sobre él, me vuelva a poner ese mismo color.

Lo único que se me ocurre es que se acceda a las propiedades del css del botón y se almacene su color actual en alguna variable, para posteriormente restablecerlo. Por eso he pensado en jquery y sus métodos mouseover() y mouseout(), lo que no sé es almacenar dicho color inicial para posteriormente restablecerlo.

Espero haberme explicado bien, muchas gracias a todos de verdad. A ver si lo consigo

supongoq uqe quieres hacer algo como este ejemplo loco que lo acabo de poner:

http://jsfiddle.net/FK8bD/3/

Muchísimas gracias elporfirio, has sido de gran ayuda. Gracias a ti ya he podido entender lo de guardar en una variable el color de fondo del botón, para posteriormente al salir el ratón sobre cada uno de los botones me vuelva a pintar su color de fondo anterior.

He adaptado un poco el código a mis necesidades, ya que lo que buscaba era que cambien de color los botones al pasar el ratón sobre ellos y no mediante el método "click". El código ha quedado de la siguiente manera:

Código Javascript :

//para que cambie los colores cuando paso el ratón
$(document).on("ready", CbioColorHover);

function CbioColorHover() {
    $(".btnNav").find("button").on("mouseover", function (e) {
        var colorFondo = $(this).css("background-color");

        $(".btnNav").mouseover(ratonDentro);

        $(".btnNav").mouseout(ratonFueraNar);
    });
}

function ratonDentro() {
    $(this).css("background-color", "rgba(10,63,122,0.9)");
}

function ratonFueraNar() {
    $(this).css("background-color", colorFondo);
}

Ahora cuando se carga la página, lo hace perfectamente. El botón más oscuro se visualiza posteriormente de salir el ratón sobre él del mismo color anterior, y el botón más claro también se visualiza con su color inicial.

Ahora bien, sigo teniendo un problema. Si no pulso ningún botón funciona perfectamente a lo que estaba buscando. El problema viene si pulso en el otro botón, como modifico los colores de los botones mediante jquery, si vuelvo a pasar el ratón sobre ellos ahora no me cambian de color. Es como si al cambiar las propiedades css de los botones ya no me funcionen los métodos mouseover() y mouseout(), pero no sé muy bien el por qué, porque el código que he mostrado arriba debería seguir funcionando igualmente...

Os muestro lo que pasa junto a su código para que podáis entenderlo mejor. Creo que estoy muy cerca de conseguirlo

http://jsfiddle.net/Teraimoana/5RFyX/41/

Millones de gracias!

Gracias por la información.