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 docs中附加一个span然后删除它就可以了。

为什么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\");
  }
);

Answer 2

如果您调整它，它就可以替换img，如下所示：

http://jsfiddle.net/7etUU/

我认为主要问题是你的div是一个跨越100％宽度的块元素，然后在悬停时替换内容，删除内容，因此它会闪烁。

Answer 3

为什么不用CSS做这个？

#circleone {
  background-image:url('FirstImageURL');
}

circleone:hover{
  background-image:url('SecondImageURL');
}

完全从this question.

中偷走了这个

Answer 4

我认为你的div占据了100％的宽度。尝试添加“float：left”CSS属性。像这样......

.secondcircle{
    float : left;
}

Answer 5

您无需使用悬停事件替换整个HTML。如果您的目标是在悬停时更改图片，请使用attr方法代替http://api.jquery.com/attr/：

<强> HTML

<div class="secondcircle" id="circleone">
    <p>
        <img id="img1" src="http://softwarebyrob.wpengine.netdna-cdn.com/images/football.jpg" />
    </p>
</div>

<强>的jQuery

$("#circleone").hover(
  function () {
      $("#img1").attr({ 'src': 'http://softwarebyrob.wpengine.netdna-cdn.com/images/programming.jpg', 'alt':'MyAlt1' });
  },
  function () {
    $("#img1").attr({ 'src': 'http://softwarebyrob.wpengine.netdna-cdn.com/images/football.jpg', 'alt':'MyAlt2' });
  }
);

在这里工作 JsFiddle ：http://jsfiddle.net/TBMxm/1/

此外，从性能和最佳实践的角度来看，这样做会更好。

UPDATE1

jQuery代码，如果您想使用HTML方法：

var originalContent = $('#circleone p').html();

$("#circleone").hover(
  function () {
      $('#circleone p').html('<img src="http://softwarebyrob.wpengine.netdna-cdn.com/images/programming.jpg"/>');
  },
  function () {
   $('#circleone p').html(originalContent);
  }
);

使用HTML工作示例： http://jsfiddle.net/TBMxm/3/

Answer 6

我在测试时发现了一些奇怪的东西。

，在我添加父div的边框之前，他原来的方法不起作用

任何人都知道为什么会这样？

jsFiddle

/*UNCOMMENT ME AND I WILL WORK
#circleone
{
    border: 1px solid #000;
}*/

.html与.html一起使用时不能正常工作

6 个答案:

UPDATE1