JQuery hover stops working after a few seconds?

Question

I am new to programming and basically I'm just playing with HTML and JavaScript right now. I recently learned about jQuery and tried to use it on the quiz periodic table page that I did. I wanted to be able to move the mouse cursor over certain elements and see the corresponding picture, and then pull out the mouse and restore it to the symbol of the element and the name that was there before. Here is my code:

The element is in an HTML encoded table, for example:

<table id="ptable" style="text-align:center;">
    <tr>
        <td>
            <div id="einsteinium"><span style="font-size:32px;">Es</span>
                <p style="font-size:12px;">Einsteinium</p>
            </div>
        </td>
        <td>hydrogen</td>
        <td>helium</td>
    </tr>
</table>

And here is jQuery:

$(document).ready(function () {
    var oldhtml = "";
    oldhtml = $("#einsteinium").html();
    $("#einsteinium").hover(function () {
            $("#einsteinium").html("<img src=\"http://images.mentalfloss.com/sites/default/files/styles/insert_main_wide_image/public/einstein1_7.jpg\" height=\"70px\" width=\"70px\">");
        },
        function () {
            $("#einsteinium").html(oldhtml);
        });
});

Fiddle

, / . , , , . , , ( , , ). z- div , . !

Answer 1

, div, /

- javascript, css hover,

#einsteinium > img {
  display: none;
}
#einsteinium:hover > img {
  display: inline-block;
}
#einsteinium:hover > div {
  display: none;
}

<table id="ptable" style="text-align:center;">
  <tr>
    <td>
      <div id="einsteinium">
        <img src="http://images.mentalfloss.com/sites/default/files/styles/insert_main_wide_image/public/einstein1_7.jpg" height="70px" width="70px">
        <div>
          <span style="font-size:32px;">Es</span>
          <p style="font-size:12px;">Einsteinium</p>
        </div>
      </div>
    </td>
    <td>hydrogen</td>
    <td>helium</td>
  </tr>
</table>

Hide result