Change div content on mouse hover with default content fallback

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

var element = getElementById('content'),

function hover(description) {
  storedText = element.innerHTML;
  element.innerHTML = description;

function leave() {
    element.innerHTML = storedText;
<div id="content">
    Stuff should be placed here.

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

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

CLICK HERE to find out more related problems solutions.

Leave a Comment

Your email address will not be published.

Scroll to Top