1

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

2 respuestas 2

2

Supongo que las "imagenes" se encuentran donde dice Lorem ipsum dolor... y que el evento hover solo es cuando el mouse esta sobre las imágenes o sobre el strong del titulo, puedes simplificarlo usando un on.mouseenter y un on.mouseleave:

$('span').hide(); //supongamos que estan ocultos

var textoh2 = ''; //guardar #descripcion

$("a").on({
	'mouseenter':function(){ //sobre
		textoh2 = $('h2').text();
		var txt =  $(this).find('span').text();
		$('h2').text(txt);
	},
	'mouseleave':function(){ //alejado
		$('h2').text(textoh2);
	}
});
a{
  display:inline-block; /*solo demostrativo*/
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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><br> <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRxbzzxRWP-N-Kb8X4ZY_mM8lhl-dN2ke5lFB_TvR0ggylo9lvw" width="100" height="100">
  </a>
  <a id="desayunos" href="desayunos.html" title="Desayunos">
    <span>Completísimos desayunos.</span><br>
    <strong>Desayunos</strong><br><img src="https://www.infobae.com/new-resizer/oAV37GUJPvHGRwE1DLT-Y2Zq6Zk=/600x0/filters:quality(100)/s3.amazonaws.com/arc-wordpress-client-uploads/infobae-wp/wp-content/uploads/2017/02/01155235/iStock-502808838.jpg" width="100" height="100">
  </a>
  <a id="tortas" href="tortas.html" title="Tortas">
    <span>Exquisitas tortas de todos los sabores.</span><br>
    <strong>Tortas</strong><br><img src="http://food.fnr.sndimg.com/content/dam/images/food/fullset/2014/3/15/0/GI1607H_Tortas-Ahogadas_s4x3.jpg.rend.hgtvcom.616.462.suffix/1401373824370.jpeg" width="100" height="100">
  </a>
  <div id="banner"></div>
</div>

0

Creo entender lo que buscas, pero tu código es raro y confuso. Esto es nuevo a ver si te sirve.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title></title>

  </head>
  <body>
      <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>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
    <script>
        $(document).ready(function() {
            var $contenido = "";
            $("#cupcakes").hover(function () {
                $contenido =  $(this).find('span').text();
                $("#descripcion").text($contenido);
            });
            $("#desayunos").hover(function () {
                $contenido =  $(this).find('span').text();
                $("#descripcion").text($contenido);
            });
            $("#tortas").hover(function () {
                $contenido =  $(this).find('span').text();
                $("#descripcion").text($contenido);
            });
        });
    </script>
  </body>
</html>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.