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

问题是爱因斯坦的图片会卡住而不会返回元素符号/名称。在小提琴上，如果你继续使用鼠标，它将再次开始工作，但它不会在我的代码上执行。对我来说，当它被卡住时它不会被打破（但小提琴也会被卡住，我根本不希望这种情况发生）。我试过改变div和table的z-index，但没有运气。我真的很感激任何帮助！

Answer 1

问题是因为，您正在更改悬停div的内容，这会弄乱鼠标进入/离开事件

您可以在没有任何javascript的情况下执行此操作，但使用css和：hover选择器（如

）

＆＃13;

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

＆＃13;

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

＆＃13;

几秒后jQuery悬停停止工作？

1 个答案: