javascript - .hover 在与 .html 一起使用时不起作用

Question

我正在尝试用 jQuery 做一个简单的图像翻转，但是这段代码不起作用:

HTML:

<div class="secondcircle" id="circleone">
    <p>
        <img src="/../ex/img/group1.png">
    </p>
</div>

JS:

$("#circleone").hover(
  function () {
    $(this).html("<p><img src=\"/../ex/img/group2.png\"></p>");
  },
  function () {
    $(this).html("<p><img src=\"/../ex/img/group1.png\"></p>");
  }
);

鼠标进入事件触发得很好，但当鼠标离开时没有任何反应。

此外，该代码可以很好地处理更简单的操作 - the example在附加跨度然后删除它的 jQuery 文档中工作得很好。

为什么 html 不起作用？多年来我一直坚持这一点。

更新:几乎每个回答/评论都建议只替换图像源，虽然这非常有效(谢谢!)，但有时我确实需要更改 HTML(例如更改文本)。这只是一个例子。抱歉，我最好在问题中具体说明。

Answer 1

与其替换整个 HTML，不如只更改图像源。

$("#circleone").hover(function () {
    $(this).find('img').attr("src","/../ex/img/group2.png\");
  },
  function () {
    $(this).find('img').attr("src","/../ex/img/group1.png\");
  }
);