如何使用javascript正确切换图像？

我的页面上有一些复杂的div结构，我想切换一些图像（悬停），但我不能直接用css设置悬停，因为我想使悬停在另一个透明图像后面。因此，我在顶部创建了透明覆盖。当覆盖悬停时，将切换指定div的背景

HTML:

下面是jQuery正在进行切换：

$(function() {
     $("#overlay").hover(function() {
          $("#image").css({
              "background": "url(myNewImage.jpg)"
          });
     }, function() {
          $("#image").css({
              "background": "url(myImage.jpg)"
          });
     });
});

它可以毫无问题地切换图像。问题是切换图像时会有一个小的延迟，所以在一瞬间（不到一秒）您可以看到空白背景（当#image div没有填充任何一个图像时）

另一方面，当您在不使用jQuery的情况下使用纯CSS切换图像时 在这种情况下不可能）则不存在此类延迟

---

那么，使用jQuery，您将如何防止这种延迟的发生呢？还是有更好的办法解决这个问题

我不是100%确定，因为我不知道完整的情况，但从您提供的信息来看，纯CSS也应该可以：

#overlay:hover #image {
    background: url(anotherImage.jpg);
}

---

关于显示图片的延迟，您可以使用精灵。将两张图片放在一个文件中（例如，彼此上方），悬停时，更改背景图像位置。

您的问题是，您通过jQuery加载的图像未预加载。当您关闭图像时，图像需要一秒钟才能下载。当您在CSS中有图像URL时，所有这些图像都会随样式表一起下载。您的问题的解决方案是预加载图像。

您需要设置多个背景图像，以便两个图像都加载。 悬停时，切换背景位置

类似于此：

$(function() {
     $("#overlay").hover(function() {
          $("#image").css({
              "background": "url(myNewImage.jpg) top left, url(myImage.jpg) 9999px 9999px"
          });
     }, function() {
          $("#image").css({
              "background": "url(myNewImage.jpg) 9999px 9999px, url(myImage.jpg)  top left"
          });
     });
});

---

不幸的是，正如我所说，这是不可能的。DOM结构太复杂，CSS无法处理。你确定吗？因为CSS只是在做JS正在做的事情。当#overlay Div悬停时，#图像将更改为背景图像。如果id是唯一的，那么应该可以很好地工作。您不能像这样使用CSS选择器，它不会工作。很抱歉，我没有看到覆盖div在图像div之后；-）否则：这就是我的想法，但我不确定。谢谢。@MatúšDúbrava我建议执行预加载，即在脚本之前的隐藏div

display:none

中获取这些图像。这将确保在从服务器完全下载图像之前，脚本不会准备就绪。

#overlay:hover #image {
    background: url(anotherImage.jpg);
}

$(function() {
     $("#overlay").hover(function() {
          $("#image").css({
              "background": "url(myNewImage.jpg) top left, url(myImage.jpg) 9999px 9999px"
          });
     }, function() {
          $("#image").css({
              "background": "url(myNewImage.jpg) 9999px 9999px, url(myImage.jpg)  top left"
          });
     });
});

#image {
    position: absolute;
    width: 300px;
    height: 300px;
    background:url(myNewImage.jpg) 9999px 9999px, url(myImage.jpg)  top left;
}