var cont = $("h2#descripcion").text();
function leerSpan() {
var x = $('span', this).text();
$('h2').text(x);
}
function volver() {
var y = $('span', this).text();
$('h2').text(y);
}
$("h2").hover(leerSpan, volver);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="header"></div>
<div id="nav"></div>
<div id="contenido">
<h1>Nuestros servicios</h1>
<h2 id="descripcion">Sabores únicos para momentos únicos</h2>
<a id="cupcakes" href="cupcakes.html" title="Cupcakes">
<span>Variedad única en cupcakes.</span>
<strong>Cupcakes</strong> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</a>
<a id="desayunos" href="desayunos.html" title="Desayunos">
<span>Completísimos desayunos.</span>
<strong>Desayunos</strong> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</a>
<a id="tortas" href="tortas.html" title="Tortas">
<span>Exquisitas tortas de todos los sabores.</span>
<strong>Tortas</strong> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</a>
<div id="banner"></div>
</div>
<div id="footer"></div>
tengo 3 etiquetas span "ocultas", que son las de cupcakes, desayunos y tortas , lo que necesito es que al pasar el mouse (hover) sobre las imagenes , el h2 cambie su contenido por el texto de cada span , intenté creando dos funciones pero no logro que se cambie el texto