CODEWITHSUNDEEP
javascriptjqueryhtml
newtothis
newtothis

Reputation: 71

jQuery hover stops working after a few seconds?

I am new to programming and am mostly just playing around with HTML and JavaScript right now. I recently learned about jQuery and was trying to use it in a periodic table quiz page I made. I wanted to be able to mouse over certain elements and see a relevant picture and then mouse off and restore it to the element symbol and name that was there before. Here is my code:

The element is in a table coded by HTML, like so:

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

The problem is that the picture of Einstein will get stuck and won't return to the element symbol/name. On the fiddle, if you keep mousing over it, it will start working again, but it doesn't do that on my code. For me, when it gets stuck it doesn't get unstuck (but the fiddle does get stuck too, and I don't want that to happen at all). I have tried changing the z-index of the div and table, but no luck there. I'd really appreciate any help!

Upvotes: 4

Views: 133

Answers (1)

Arun P Johny
Arun P Johny

Reputation: 388326

The problem is because, you are changing the contents of the hovering div, which is messing up the mouse enter/leave events

You can do it without any javascript, but with css and the :hover selector like

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

Upvotes: 3

Related Questions