show span text with hover JQuery

Question

show span text with hover JQuery

Navigation

#1 by (2 votes)
#2 by (0 votes)

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>

I have 3 "hidden" span tags, which are those of cupcakes, breakfasts and cakes, what I need is that when I hover over the images, the h2 changes its content by the text of each span, I tried creating two functions but I can not change the text

jquery html

asked by ale 06.02.2018 в 20:13

source

2 answers

0

I think I understand what you're looking for, but your code is weird and confusing. This is new to see if it works.

<!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>

answered by 06.02.2018 в 20:38

Android studio does not find a dependency PHP files in Electron, what to do?

score 2 · Accepted Answer

I guess the "images" are where it says Lorem ipsum dolor ... and that the event hover is only when the mouse is on the images or on the strong of the title, you can simplify it using a on.mouseenter and a 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>