1

Estoy haciendo un ejercicio en el que tengo que cambiar el texto al pasar el ratón por encima de un <div> y, cambiarlo de nuevo al quitarlo de encima. Pues bien, cada evento funciona perfectamente de forma individual. Pero al tener los dos solo funciona el onmouseover.

¿En qué me equivoco?

Muchas gracias!

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    </head>
    <body>
    <div>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
             Id officiis, doloremque, eius quam consequuntur voluptas 
             quidem iste deleniti eaque unde ad consequatur. Consequatur
              nostrum nobis facere veniam! Ut, sapiente repellat.</p>
    </div>

    <script>
        var bloque = document.getElementsByTagName("div")[0];
        function cambiar(){
            bloque.innerHTML = "<p>Tengo el ratón encima!</p>";
        }

        function cambiar2(){
            bloque.innerHTML = "<p>Gracias por quitármelo</p>";
        }

        bloque.onmouseover = cambiar;
        bloque.onmouseout = cambiar2;


    </script>
    </body>
    </html>

2 respuestas 2

2

Para resolverlo en lugar de usar innerHTML usa textContent, con innerHTML estas modificando también el comportamiento del elemento <div>.

Observa el código funcionando:

var bloque = document.getElementsByTagName("div")[0];
    function cambiar(){
        bloque.textContent= "Tengo el ratón encima!";
    }

    function cambiar2(){
        bloque.textContent = "Gracias por quitármelo";
    }

    bloque.onmouseover = cambiar;
    bloque.onmouseout = cambiar2;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
         Id officiis, doloremque, eius quam consequuntur voluptas 
         quidem iste deleniti eaque unde ad consequatur. Consequatur
          nostrum nobis facere veniam! Ut, sapiente repellat.</p>
</div>

</body>
</html>

Espero sea lo que buscas, saludos.

2
  • 1
    Justo lo que buscaba, muchas gracias por una explicación tan clara Commented el 10 oct. 2019 a las 10:51
  • de nada @ÁlvaroGarcía que tengas buen día. Commented el 10 oct. 2019 a las 10:51
1

Si le das altura al div, funciona correctamente.

<div style="height: 100px;">
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
         Id officiis, doloremque, eius quam consequuntur voluptas 
         quidem iste deleniti eaque unde ad consequatur. Consequatur
          nostrum nobis facere veniam! Ut, sapiente repellat.</p>
</div>

Si usas los eventos onmousenter y onmouseleave evitas un pequeño parpadeo que se nota cuando mueves el ratón entre el div y el p

bloque.onmouseenter = cambiar;
bloque.onmouseleave = cambiar2;
1
  • Muchas gracias Ordago Commented el 10 oct. 2019 a las 10:51

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.