0

我是一个 jQuery 菜鸟，所以也许你可以帮助我编写代码。我有一个图像。我希望在悬停时图像会发生变化，当我单击它时，会出现另一个（第 3 个）图像，当我鼠标移出时，我想保留第 3 个图像（如果单击）。每个图像都必须淡入。

也许你能帮助我？到目前为止，我只有悬停工作和点击，但没有淡入/淡出并在鼠标移出时保持点击图像。

这是我的代码，但我认为您可以编写更好的代码。

$("img#hovertom").hover(
  function () {
    var id = $(this).attr("id");
    $(this).attr("src", "../img/tom_hover.png");
  }, 
  function () {
      var id = $(this).attr("id");
    $(this).attr("src", "../img/tom.png");
  }
);

$("img#hoverdaniel").hover(
  function () {
    var id = $(this).attr("id");
    $(this).attr("src", "../img/daniel_hover.png");
  }, 
  function () {
      var id = $(this).attr("id");
    $(this).attr("src", "../img/daniel.png");
  }
);

在 html 中，我只有 ID 为 hovertom 的图像。

4

1 回答 1

2

您不必在 jQuery 中执行此操作，在标签或 CSS 中执行此操作要简单得多，但稍后会在悬停时更改。你可以用直接的 javascript 和 CSS 来做这件事，它会像你想要的那样工作

但既然你想要它在 jQuery 中，你可以这样做

var clicked = false;
$("#hovertom").mouseleave(function () {
    if(!clicked)
        $(this).attr("src", "http://www.so-gnar.com/wp-content/uploads/2011/04/TOMS-SHOES.jpg");
});
$("#hovertom").mouseenter(
  function () {
      if(!clicked)
        $(this).attr("src", "http://images.toms.com/media/catalog/product/cache/1/side/900x640/9df78eab33525d08d6e5fb8d27136e95/w/-/w-red-canvas-classics-s-su12.jpg");
});
$("#hovertom").click(
  function () {
    $(this).attr("src", "http://images.toms.com/media/catalog/product/cache/1/side/900x640/9df78eab33525d08d6e5fb8d27136e95/w/-/w-ash-canvas-classics-s-su12_1.jpg");
    clicked = true;
});

只需重复它，将第二个 ID 和 srcs 替换为第二个，或将其应用于一个类或简单地使用“img”标签

于 2013-07-01T16:37:29.467 回答