Change div content on mouse hover with default content fallback

Question

You need to store the original text and bring it back when the mouse leaves.

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>

It is generally recommended to add event listeners in the JS code and not in the HTML, but put that aside for now.

Leave a Comment Cancel Reply