动态设置背景图像不显示在Chrome

我遇到了一个问题，在Chrome中没有显示div的背景图像。

我正在工作的一个网站有两个图像容器坐在另一个上面:一个具有较低的z-index显示当前选中的图像，而一个具有较高的z-index用于预览其他图像，当用户在导航项上悬停。

基本上，应该发生的是每次鼠标光标从一个导航项移动到下一个时，旧的预览图像被保存为预览图像容器的背景，然后预览容器中的实际图像被隐藏(没有被注意到，因为图像仍然在背景中)，替换为新图像，然后淡出。淡出应该直接从旧图像发生，这就是为什么我之前将旧图像设置为背景。

现在，这在任何地方都可以完美地工作，但在谷歌浏览器中，背景图像只是不会显示。奇怪的是，我使用调试中断来仔细查看，并注意到背景图像实际上是正确设置的(这意味着它在当时的元素的CSS中正确列出)，但它没有显示在浏览器中。

var previewDelay; 
$("#cnt-navigation_secondary").find(".txt-navigation_secondary").mouseenter(function(){
    var newImage = $(this).find("img").attr("src");
    var oldImage = $("#img-content-preview").attr("src");
    previewDelay = setTimeout(function(){
        $("#cnt-content-preview").show(); //The previewing container is shown (in case it was hidden before).
        $("#cnt-content-preview").css({"background-image":"url("+oldImage+")"}); //The old image is set as the background of the previewing container
        $("#img-content-preview").hide(); //The image inside the previewing container is hidden. All browsers but Chrome now show still show the same image, as it is in the background, but Chrome doesn't, even though it's visible in the CSS.
        $("#img-content-preview").attr("src", newImage); //The source of the hidden image is set to the new image.
        $("#img-content-preview").fadeIn(400); //The new image is faded in.           
    },100);
}).mouseleave(function(){
    clearTimeout(previewDelay);
});

您可以在这里看到整个操作:http://www.haasarchitektur.at/index.php?main=1&siteid=403尝试将鼠标悬停在架构子导航中的项目上。例如，在Firefox中，预览图像会从一个项目流畅地切换到另一个项目，而在Chrome中，由于预览容器的背景没有正确设置，您总是会短暂地看到后面的元素闪烁。

我有点不知道这个行为是从哪里来的，所以任何帮助都会非常感激。,)

谢谢你&最好的问候,迈克尔。