1

我正在尝试使用 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>");
  }
);

鼠标进入事件触发得很好，但是当鼠标离开时没有发生。

此外，代码可以在更简单的操作中正常工作 - jQuery 文档中附加跨度然后删除它的示例工作得很好。

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

更新：几乎每个答案/评论都建议只替换图像源，虽然这很好用（谢谢！）有时我确实需要更改 HTML（例如更改文本）。这只是一个例子。抱歉，我应该在问题中更好地说明这一点。

4

6 回答 6

2

而不是替换你的整个HTML是一个更好的主意，只是改变图像的来源。

$("#circleone").hover(function () {
    $(this).find('img').attr("src","/../ex/img/group2.png\");
  },
  function () {
    $(this).find('img').attr("src","/../ex/img/group1.png\");
  }
);
于 2013-06-26T21:08:01.777 回答
2

如果你调整它，它就会起作用，所以它只是替换img，如下所示：

http://jsfiddle.net/7etUU/

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

于 2013-06-26T21:08:18.747 回答
2

为什么不用 CSS 做到这一点？

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

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

完全从这个问题中偷走了这个。

于 2013-06-26T21:09:00.570 回答
1

我在测试这个时发现了一些奇怪的东西。在我在父 div 周围添加边框之前，他的原始方法不起作用，然后它就可以正常工作了。

有谁知道为什么会这样？

jsFiddle

/*UNCOMMENT ME AND I WILL WORK
#circleone
{
    border: 1px solid #000;
}*/
于 2013-06-26T21:16:10.997 回答
1

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

.secondcircle{
    float : left;
}
于 2013-06-26T21:05:19.403 回答
1

您不需要用悬停事件替换整个 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/

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

更新1

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

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/

于 2013-06-26T21:13:17.483 回答