Question

我是一个jQuery noob，所以也许你可以帮我解决我的代码问题。我有一张图片。我希望在悬停图像更改时，当我点击它时，另一个（第3个）图像进来，当我去鼠标时我想保留第3个图像（如果点击）。每张图片都必须褪色。

也许你可以帮助我？到目前为止，我只有悬停工作和点击，但没有fadein / fadeout并在mouseout时保持点击图像。

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

$("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的图像。

Answer 1

您不必在jQuery中执行此操作，在标记或CSS like this中执行它会更简单，但稍后会在悬停时更改。您可以使用直接的javascript和CSS来执行like this，它可以像您希望的那样工作

但是既然你想在jQuery中使用它，你可以做like this

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'标签

在悬停时更改图像并单击鼠标悬停，保持图像不受点击影响

1 个答案: