javascript - jQuery 悬停几秒钟后停止工作？

Question

我是编程新手，现在大部分时间只是在玩弄 HTML 和 JavaScript。我最近了解了 jQuery，并试图在我制作的元素周期表测验页面中使用它。我希望能够将鼠标悬停在某些元素上并查看相关图片，然后将鼠标移开并将其恢复为之前存在的元素符号和名称。这是我的代码:

该元素位于由 HTML 编码的表格中，如下所示:

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

这里是 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

问题是爱因斯坦的图片会卡住，不会返回元素符号/名称。在 fiddle 上，如果你一直将鼠标悬停在它上面，它会再次开始工作，但它不会在我的代码中这样做。对我来说，当它卡住时它不会松开(但 fiddle 确实也会卡住，我根本不希望这种情况发生)。我试过更改 div 和表格的 z-index，但没有成功。如果有任何帮助，我将不胜感激!

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>