jQuery 悬停在几秒钟后停止工作

jQuery hover stops working after a few seconds?

本文关键字：几秒 停止工作 悬停 jQuery      更新时间：2023-09-26

我是编程新手，现在主要只是在玩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);
        });
});

小提琴

问题是爱因斯坦的图片会卡住，不会回到元素符号/名称。在小提琴上，如果你继续将鼠标悬停在它上面，它会再次开始工作，但它在我的代码上不会这样做。对我来说，当它被卡住时，它不会被解开（但小提琴也会卡住，我根本不希望这种情况发生）。我尝试更改div 和表的 z 索引，但没有运气。我真的很感激任何帮助！

问题是因为，您正在更改悬停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>

相关文章：