Implementé la respuesta aceptada para cambiar el contenido de div en función del desplazamiento del mouse en diferentes div en muchos enlaces, por lo que realmente no quiero ir con otra solución si se puede evitar. Aunque estoy tratando de descifrar una pieza más del rompecabezas...
Parece que no puedo llegar a donde se encuentra de forma predeterminada en el texto original de la división de contenido cuando no paso el cursor sobre un elemento.
<div id="content"> Stuff should be placed here. </div> <br/> <br/> <br/> <ul> <li onmouseover="hover('Apples are delicious')">Apple</li> <li onmouseover="hover('oranges are healthy')">Orange</li> <li onmouseover="hover('Candy is the best')">Candy</li> </ul> <script> function hover(description) { console.log(description); document.getElementById('content').innerHTML = description; } </script>Debe almacenar el texto original y recuperarlo cuando el mouse se vaya.
var element = getElementById('content'), storedText; function hover(description) { console.log(description); storedText = element.innerHTML; element.innerHTML = description; } function leave() { element.innerHTML = storedText; } <div id="content"> Stuff should be placed here. </div> <br/> <br/> <br/> <ul> <li onmouseover="hover('Apples are delicious')" onmouseleave="leave()">Apple</li> <li onmouseover="hover('oranges are healthy')" onmouseleave="leave()">Orange</li> <li onmouseover="hover('Candy is the best')" onmouseleave="leave()">Candy</li> </ul>Por lo general, se recomienda agregar detectores de eventos en el código JS y no en el HTML, pero déjalo a un lado por ahora.
Puedes lograr lo mismo sin ningún Javascript:
li::before { content: attr(data-text); } li:hover::before { content: attr(data-text-hover); } <ul> <li data-text-hover="Apples are delicious" data-text="Apple"></li> <li data-text-hover="Oranges are healthy" data-text="Orange"></li> <li data-text-hover="Candy is the best" data-text="Candy"></li> </ul>No creo que en su código haya nada para hacer que el contenido vuelva al valor predeterminado, pero hice los cambios mínimos en su código para que el contenido vuelva al valor predeterminado y he usado el evento onmouseout para eso.
<div id="content"> Stuff should be placed here. </div> <br/> <br/> <br/> <ul> <li onmouseover="hover('Apples are delicious')" onmouseout="hover('Stuff should be placed here.')">Apple</li> <li onmouseover="hover('oranges are healthy')" onmouseout="hover('Stuff should be placed here.')">Orange</li> <li onmouseover="hover('Candy is the best')" onmouseout="hover('Stuff should be placed here.')">Candy</li> </ul> <script> function hover(description) { console.log(description); document.getElementById('content').innerHTML = description; } </script>