Jquery 在fancybox gallery内的鼠标上交换图像？

当单击缩略图并将图像加载到Fancybox幻灯片中时，我希望能够在悬停在图像上时在图像的两个不同版本之间切换

我一直在尝试通过搜索这里的问题找到的各种代码，尽管我找不到与我的确切问题相关的Q&a

我尝试过各种不同版本的鼠标悬停脚本，如下所示：

$("#test").mouseover(function (e) {    
    $(this).attr("src", $(this).attr("src").replace("images/rt/test1.jpg", "images/rt/test2.jpg"));
}).mouseout(function (e) {
    $(this).attr("src", $(this).attr("src").replace("images/rt/test2.jpg", "images/rt/test1.jpg"));
});

这是将图像加载到幻灯片中的一段代码：

<a data-fancybox="gallery" href="images/rt/test1.jpg" data-caption="lorem ipsum">
    <img src="images/rt/thumb.jpg" height="85px" width="85px">
</a>

img src部分是缩略图，但我需要切换版本的是href标记引用的图像。我还没有找到任何可以这样做的东西

下面是我发现的一件确实有效的事情，但它只在我将它与img标记一起使用时有效，而不是在我尝试将它应用到href部分时有效

<img src="images/rt/test1.jpg" height="85px" width="85px" onmouseover="this.src='images/rt/test2.jpg'"onmouseout="this.src='images/rt/test1.jpg'">

理想情况下，我需要这样的东西，我可以将其放入href标记中，或者对mouseout函数进行一些修改，使其能够针对fancybox的正确部分

---

如果你不知道，我是jquery的真正初学者，所以我可能错过了一些非常明显的东西

这个问题的答案与其他99%与fancybox相关的问题的答案相同-只需使用回调。回调允许您在进程的不同阶段执行代码，例如，在加载映像之后。所以，代码可以是这样的：

$('[data-fancybox="gallery"]').fancybox({
  afterLoad : function(instance, current) {

    current.$image.mouseover(function (e) {    
      $(this).attr("src", $(this).attr("src").replace("/id/1", "/id/2"));
    }).mouseout(function (e) {
      $(this).attr("src", $(this).attr("src").replace("/id/2", "/id/1"));
    });

  }
});

---

演示-

那么，您想更改鼠标悬停事件的

href

属性吗？你到底为什么要这么做？为什么你认为你的第一次截取不起作用，请在codepen/jsfiddel/whateverI上提供实时演示。我不想更改URL，我想在鼠标上方操纵加载的图像。但画廊的工作方式似乎是，加载并成为全尺寸的图像由该组“a”标记中的图像url引用。它的响应方式似乎与“img”标记的响应方式不同，例如，当我尝试引入一个类/id时。我无法理解它。我试着把它全部塞进codepen——所以当你点击拇指的时候，它就是加载的图像，这就是我想要在悬停时能够改变的

$('[data-fancybox="gallery"]').fancybox({
  afterLoad : function(instance, current) {

    current.$image.mouseover(function (e) {    
      $(this).attr("src", $(this).attr("src").replace("/id/1", "/id/2"));
    }).mouseout(function (e) {
      $(this).attr("src", $(this).attr("src").replace("/id/2", "/id/1"));
    });

  }
});