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>