jquery - ホバーしてクリックすると画像を変更し、マウスオーバーするとクリックから画像を保持します

Question

私は 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の画像しかありません。